css attr的使用

经常有需要是，在用户输入错误的时候给用户进行提示，一般我们可能会在input的下面隐藏一个span，来进行提示，如果用dom操作它的text，这样做算是比较麻烦的，操作的对象多，有没有更加简单的方法呢？

css 的attr给出了这种可能，attr可以获取某个元素的属性值

<!DOCTYPE html>
<html>
  <head>
      <meta charset="utf-8" />
      <style type="text/css">

        #inputBox {
          position: relative;
        }
        #inputBox::after {
          content: attr(tips);
          position: absolute;
          background: orange;
          left: 0px;
          top: 1.5em;
        }
                
      </style>
  </head>
  <body>
    <!-- 目前 input 不支持before after -->
    <div id="inputBox" tips="">
      <input type="text" id="inputLine"/>
    </div>

    <script type="text/javascript">
      //输入错误的时候 进行提示
      document.getElementById("inputLine").onblur = function(event) {
        var target = event.target || event.srcElement;
        var value= target.value;
        var reg = /\w+@\w+\.\w{2,3}/;
        if (!reg.test(value)) {
          document.getElementById("inputBox").setAttribute("tips", "邮箱验证错误");
        }
      }
      
    </script>
  </body>
</html>

Paste_Image.png

上面的做法还不是最好的，因为不能加边框，如果加边框的话，会有即使 tips没有内容的话，还是会有边框显示出来

有没有更好一点的呢？当然是使用css的边框选择器了

<!DOCTYPE html>
<html>
  <head>
      <meta charset="utf-8" />
      <style type="text/css">
        /*存在tips属性的时候 inputBox才...*/
        #inputBox[tips] {
          position: relative;
        }
        #inputBox[tips]::after {
          content: attr(tips);
          position: absolute;
          border: 1px solid gray;
          background: orange;
          left: 0px;
          top: 1.5em;
        }
                
      </style>
  </head>
  <body>
    <!-- 目前 input 不支持before after -->
    <div id="inputBox">
      <input type="text" id="inputLine"/>
    </div>
    <div>aaaaa</div>

    <script type="text/javascript">
      //输入错误的时候 进行提示
      document.getElementById("inputLine").onblur = function(event) {
        var target = event.target || event.srcElement;
        var value= target.value;
        var reg = /\w+@\w+\.\w{2,3}/;
        if (!reg.test(value)) {
          document.getElementById("inputBox").setAttribute("tips", "邮箱验证错误");
        }
      }

      document.getElementById("inputLine").onfocus = function(event) {
        document.getElementById("inputBox").removeAttribute("tips");
      }
      
    </script>
  </body>
</html>

通过对比发现，只有在有对应属性的情况下，after才进行对应的显示。所以一开始它是没有border的

Paste_Image.png

css attr的使用

推荐阅读更多精彩内容