html5默認(rèn)氣泡修改
默認(rèn)的瀏覽器氣泡樣式：
谷歌瀏覽器
火狐瀏覽器
IE瀏覽器
在谷歌29版本之前可以使用偽元素進(jìn)行修改：
::-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){ //阻止默認(rèn)氣泡 form.addEventListener("invalid",function(e){ e.preventDefault(); },true) //注意要設(shè)置為true //當(dāng)Event對(duì)象的cancelable為false時(shí)，表示沒有默認(rèn)行為，這時(shí)即使有默認(rèn)行為，調(diào)用 preventDefault也是不會(huì)起作用的 //驗(yàn)證不通過，則阻止表單提交 form.addEventListener("submit",function(e){ if(!this.checkValidity()){ e.preventDefault(); } },true) //點(diǎn)擊提交觸發(fā)的事件 submit.addEventListener("click",function(e){ var invalids=form.querySelectorAll(":invalid"), errMsgs=form.querySelectorAll(".error-msg"), parent; //循環(huán)，清除掉上一次添加的所有錯(cuò)誤信息 for(var i=0;i<errMsgs.length;i++){ errMsgs[i].parentNode.removeChild(errMsgs[i]); } //循環(huán)，添加新的錯(cuò)誤信息 for(var i=0;i<invalids.length;i++){ parent=invalids[i].parentNode; /* element.insertAdjacentHTML(position, text); beforebegin: 元素自身的前面。 afterbegin: 插入元素內(nèi)部的第一個(gè)子節(jié)點(diǎn)之前。 beforeend: 插入元素內(nèi)部的最后一個(gè)子節(jié)點(diǎn)之后。 afterend: 元素自身的后面。 text是要被解析為HTML或XML,并插入到DOM樹中的字符串 */ parent.insertAdjacentHTML("beforeend","<div class='error-msg'>"+invalids[i].validationMessage+"</div>"); } //如果存在錯(cuò)誤信息，則給第一個(gè)錯(cuò)誤信息一個(gè)focus if(invalids.length>0){ invalids[0].focus(); } }) } myui(form); </script></body></html>總結(jié)
到此這篇關(guān)于html5默認(rèn)氣泡修改的代碼詳解的文章就介紹到這了,更多相關(guān)html5默認(rèn)氣泡修改內(nèi)容請(qǐng)搜索武林網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持武林網(wǎng)！
新聞熱點(diǎn)
疑難解答
圖片精選
