html5默认气泡修改的代码详解
程序员文章站
2022-09-07 22:55:51
这篇文章主要介绍了html5默认气泡修改的代码详解,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下... 20-03-13...
html5默认气泡修改
默认的浏览器气泡样式:
谷歌浏览器
火狐浏览器
ie浏览器
在谷歌29版本之前可以使用伪元素进行修改:
::-webkit-validation-bubble 不过已被废弃!!!
新的解决方案:
效果图:
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>form</title> <style> .container{margin:100px;font-size:14px;position: relative;} .item{position: relative;width:250px;height:40px;margin-bottom: 10px;} input{width:250px;height:20px;line-height:20px;border-radius: 4px;border:1px solid #999;color:#999;margin-bottom:10px;padding:5px;position: absolute;left:66px;} input:focus{border:2px solid rgb(90,152,210);} .item label{position: absolute;left:0;top:5px;} input[type=submit]{height:30px;line-height:20px;position:absolute;left:0;background-color: rgb(90,152,210);color:#fff;width:60px;} .error-msg{ color: red; font-size: 12px; position: absolute; bottom: -8px; left: 65px; width: 329px; } </style> </head> <body> <div class="container"> <form action="#" id="form"> <div class="item"> <label for="username">用户名</label> <input type="text" id="username" required pattern="^1[0-9]{10}$"> </div> <div class="item"> <label for="password">邮箱</label> <input type="email" id="email" required> </div> <input type="submit" value="提交" id="submit"> </form> </div> <script> function myui(form){ //阻止默认气泡 form.addeventlistener("invalid",function(e){ e.preventdefault(); },true) //注意要设置为true //当event对象的cancelable为false时,表示没有默认行为,这时即使有默认行为,调用 preventdefault也是不会起作用的 //验证不通过,则阻止表单提交 form.addeventlistener("submit",function(e){ if(!this.checkvalidity()){ e.preventdefault(); } },true) //点击提交触发的事件 submit.addeventlistener("click",function(e){ var invalids=form.queryselectorall(":invalid"), errmsgs=form.queryselectorall(".error-msg"), parent; //循环,清除掉上一次添加的所有错误信息 for(var i=0;i<errmsgs.length;i++){ errmsgs[i].parentnode.removechild(errmsgs[i]); } //循环,添加新的错误信息 for(var i=0;i<invalids.length;i++){ parent=invalids[i].parentnode; /* element.insertadjacenthtml(position, text); beforebegin: 元素自身的前面。 afterbegin: 插入元素内部的第一个子节点之前。 beforeend: 插入元素内部的最后一个子节点之后。 afterend: 元素自身的后面。 text是要被解析为html或xml,并插入到dom树中的字符串 */ parent.insertadjacenthtml("beforeend","<div class='error-msg'>"+invalids[i].validationmessage+"</div>"); } //如果存在错误信息,则给第一个错误信息一个focus if(invalids.length>0){ invalids[0].focus(); } }) } myui(form); </script> </body> </html>
总结
到此这篇关于html5默认气泡修改的代码详解的文章就介绍到这了,更多相关html5默认气泡修改内容请搜索以前的文章或继续浏览下面的相关文章,希望大家以后多多支持!
下一篇: 真香!!!
推荐阅读
-
修改 bootstrap table 默认detailRow样式的实例代码
-
详解如何修改jupyter notebook的默认目录和默认浏览器
-
如何利用反射批量修改java类某一属性的代码详解
-
html5默认气泡修改的代码详解
-
微信小程序修改swiper默认指示器样式的实例代码
-
vue vue-Router默认hash模式修改为history需要做的修改详解
-
家用电器用户行为分析与事件识别代码详解+修改后运行无误的代码
-
详解修改Anaconda中的Jupyter Notebook默认工作路径的三种方式
-
Android中默认系统的声音/大小修改和配置详解
-
HTML5中input输入框默认提示文字向左向右移动的示例代码