HTML5 input改变默认样式

最新推荐文章于 2024-06-07 17:34:42 发布

weiweismile123

最新推荐文章于 2024-06-07 17:34:42 发布

阅读量2.7w

点赞数 4

分类专栏： html5 文章标签： html5 表单

本文链接：https://blog.csdn.net/weiweismile123/article/details/68942825

版权

html5 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

最近使用了html5中的input，感觉很牛逼，有很多类型和属性方便小伙伴去做各种好看的表单样式。下面我们先来看看HTML5默认的input的一些样式（本文主要讨论的是验证样式）：
默认验证样式：
这里写图片描述
代码： <form> <input type="text" required><br/> <input type="possword" required><br/> <input type="submit"> </form>
可以看出当我们添加了required属性时，HTML5将自动帮我们对input进行验证，看是否用户有输入信息。
但是有时候我们想根据自己的需求弹出提示，这个时候就需要覆盖默认的input样式。
下面是一个自定义input样式的例子：
这里写图片描述
我们在input框的右边加上了错误和正确时的图片，同时，可以看到当我们点击提交时，如果输入有无效信息，就会出现我们自定义的提示信息。下面给出代码：

<style type="text/css">
        input{
          margin: 10px 0;
        }
        /*无效输入时的样式*/
        input:required:invalid{
            background-image: url(error.png);
          background-position: right center;
          background-repeat: no-repeat;
          border-color: red;
          box-shadow: none;
           /* 兼容FF13以前版本 */
          -moz-box-shadow: none;
        }
         /*有效输入时的样式*/
        input:required:valid{
          background-image: url(true.png);
          background-position: right center;
          background-repeat: no-repeat;
          border-color: green;
          box-shadow: none;
           /* 兼容FF13以前版本 */
          -moz-box-shadow: none;
        }
    </style>
</head>
<body>
    <!-- 修改后的input -->
    <form>
      <input type="text" name="" required><br/>
      <input type="text" name="" required pattern=".{2,5}" oninvalid="setCustomValidity('两至五个汉字')" oninput="setCustomValidity('')"><br/>
      <input type="text" name="" required oninvalid="setCustomValidity('请输入用户名')" oninput="setCustomValidity('')"><br/>
      <input type="submit" name="">
    </form>
</body>

（1）首先， 我们在input添加了required属性（规定必需在提交之前填写输入字段。），当用户没有输入任何信息时，将弹出HTML5默认的或是自定义的信息（oninvalid事件中定义的信息），如第三个input它将弹出“请输入用户名”这样的提示信息。同时，HTML5提供了patern属性，它接受一个正则表达式，当表单提交时这个正则表达式会被用于验证表单内非空的值，如果控件的值不匹配这个正则表达就会弹出提示框，并阻止表达提交。

（2）其次，提示框内的文字可以使用setCustomValidity（）方法来自定义，通过oninvalid和oninput事件进行调用。其中，oninvalid事件是当用户输入的信息不合法时并且会在表单submit事件之前进行触发，同时如果验证不通过的话就不会触发表单的submit。而提交时会先验证所有表单元素是值是否有效。除了提交外还可以手动调用checkValidity方法来执行验证，或是事件监听方式（可以自己来定义js代码）。oninput事件在用户输入时触发。该事件类似于onchange 事件。

oninput事件与onchange 事件区别：

oninput 事件在元素值发生变化是立即触发，oninput事件是IE之外的大多数浏览器支持的事件，在value改变时触发，实时的，即每增加或删除一个字符就会触发，然而通过js改变value时，却不会触发。从浏览器的自动下拉提示中选取时，也不会触发。
onchange事件 在元素失去焦点时触发（onchange事件在内容改变（两次内容有可能还是相等的）且失去焦点时触发；）。另外一点不同是 onchange 事件也可以作用于 <keygen> 和 <select> 元素。

（3）使用css对样式进行修改
/*===包含required的表单===*/ /* 无效 */ input:required:invalid{ CSS代码 } /* 有效 */ input:required:valid{ CSS代码 }
上例中的error和true图片就是通过css来设置的，通过css可以设置用户在输入有效与无效时的样式。

最后，推荐一篇深度好文

oninput="setCustomValidity('')"表示在用户输入的时候将错误提示设置为空字符串（就是在输入时没有提示出来）

这里写图片描述

嘿嘿、、、、、、

weiweismile123

关注

4
点赞
踩
9

收藏

觉得还不错? 一键收藏
0
评论
HTML5 input改变默认样式

最近使用了html5中的input，感觉很牛逼，有很多类型和属性方便小伙伴去做各种好看的表单样式。下面我们先来看看HTML5默认的input的一些样式（本文主要讨论的是验证样式）：默认验证样式：代码：  <form> <input type="text" required><br/>
复制链接

扫一扫

专栏目录