美文网首页
css attr的使用

css attr的使用

作者: yongningfu | 来源:发表于2017-03-18 19:55 被阅读0次

经常有需要是,在用户输入错误的时候给用户进行提示,一般我们可能会在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的使用

    经常有需要是,在用户输入错误的时候给用户进行提示,一般我们可能会在input的下面隐藏一个span,来进行提示,如...

  • 浅析使用attr设置宽高与css设置宽高的区别

    一、主要区别 使用attr设置宽高,attr对于的是实际宽高,如果没设置css就是显示的实际宽高,如果设置了css...

  • CSS3中的content和attr的用法

    content和attr表达式,它们能在你的页面下面悄悄的使用CSS来生成内容,下面让我们看看attr和conte...

  • CSS3选择器

    CSS3 属性选择器 1.E [attr] 只使用属性名,但没有确定任何属性值 2.E [attr="valu...

  • css 属性选择器

    E{...}:指定该CSS样式对所有E元素起作用。 E[attr]{...}:指定该CSS样式对具有attr属性的...

  • 伪元素的妙用

    1. 使用自增功能实现列表序号 2. 使用after实现自动换行 3. 使用css的attr函数实现placeho...

  • 介绍以下 jQuery 函数的用法和范例

    .val() .attr() .removeAttr() .prop() .css() .addClass() ....

  • 前端学习笔记

    jQuery中attr()和prop()的使用和区别 一、attr()使用 $(selector).attr():...

  • CSS 3

    CSS3 属性选择器 E[attr] E[attr=val] E[attr*=val] 属性值里包含val字符并且...

  • css attr()

    应用场景:IE9 placeholder无效 好用记录一下

网友评论

      本文标题:css attr的使用

      本文链接:https://www.haomeiwen.com/subject/qnhpnttx.html