html5默认气泡修改的代码详解


Posted in HTML / CSS onMarch 13, 2020

html5默认气泡修改

默认的浏览器气泡样式:

谷歌浏览器

html5默认气泡修改的代码详解 
 

火狐浏览器

html5默认气泡修改的代码详解 
 

IE浏览器

html5默认气泡修改的代码详解 
 

在谷歌29版本之前可以使用伪元素进行修改:

::-webkit-validation-bubble 不过已被废弃!!!

新的解决方案:

效果图:

html5默认气泡修改的代码详解 
 

<!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默认气泡修改内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章,希望大家以后多多支持三水点靠木!

HTML / CSS 相关文章推荐
真正了解CSS3背景下的@font face规则
May 04 HTML / CSS
CSS3 Media Queries详细介绍和使用实例
May 08 HTML / CSS
CSS3不透明度实例讲解
Apr 26 HTML / CSS
浅析CSS3中鲜为人知的属性:-webkit-tap-highlight-color
Jan 12 HTML / CSS
详解css3 Transition属性(平滑过渡菜单栏案例)
Sep 05 HTML / CSS
CSS3 @keyframes简单动画实现
Feb 24 HTML / CSS
css3 矩阵的使用详解
Mar 20 HTML / CSS
CSS3+HTML5+JS 实现一个块的收缩与展开动画效果
Nov 17 HTML / CSS
html5实现canvas阴影效果示例
May 07 HTML / CSS
HTML5去掉输入框type为number时的上下箭头的实现方法
Jan 03 HTML / CSS
Html5原生拖拽相关事件简介以及基础实现
Nov 19 HTML / CSS
ivx平台开发之不用代码实现一个九宫格抽奖功能
Jan 27 HTML / CSS
canvas如何实现多张图片编辑的图片编辑器
Mar 10 #HTML / CSS
HTML5表单验证特性(知识点小结)
Mar 10 #HTML / CSS
html5 datalist 选中option选项后的触发事件
Mar 05 #HTML / CSS
关于解决iframe标签嵌套问题的解决方法
Mar 04 #HTML / CSS
Html5 video标签视频的最佳实践
Feb 26 #HTML / CSS
HTML如何让IMG自动适应DIV容器大小的实现方法
Feb 25 #HTML / CSS
HTML实现代码雨源码及效果示例
Feb 25 #HTML / CSS
You might like
理解php原理的opcodes(操作码)
2010/10/26 PHP
php如何调用webservice应用介绍
2012/11/24 PHP
php excel reader读取excel内容存入数据库实现代码
2012/12/06 PHP
PHP开发中csrf攻击的简单演示和防范
2017/05/07 PHP
PHP根据树的前序遍历和中序遍历构造树并输出后序遍历的方法
2017/11/10 PHP
PHP扩展mcrypt实现的AES加密功能示例
2019/01/29 PHP
php常用日期时间函数实例小结
2019/07/04 PHP
css3元素简单的闪烁效果实现(html5 jquery)
2013/12/28 Javascript
JQEasy-ui在IE9以下版本中二次加载的问题分析及处理方法
2014/06/23 Javascript
jQuery图片旋转插件jQueryRotate.js用法实例(附demo下载)
2016/01/21 Javascript
AngularJS实践之使用NgModelController进行数据绑定
2016/10/08 Javascript
js对字符串进行编码的方法总结(推荐)
2016/11/10 Javascript
jQuery 插件封装的方法
2016/11/16 Javascript
Vue常用指令V-model用法
2017/03/08 Javascript
vue.js声明式渲染和条件与循环基础知识
2017/07/31 Javascript
简单实现jquery隔行变色
2017/11/09 jQuery
9种改善AngularJS性能的方法
2017/11/28 Javascript
微信小程序实现获取自己所处位置的经纬度坐标功能示例
2017/11/30 Javascript
对vue.js中this.$emit的深入理解
2018/02/23 Javascript
JS使用Date对象实时显示当前系统时间简单示例
2018/08/23 Javascript
详解Vue的ref特性的使用
2020/01/24 Javascript
JavaScript 引用类型实例详解【数组、对象、严格模式等】
2020/05/13 Javascript
[56:48]FNATIC vs EG 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/16 DOTA
Django数据库操作的实例(增删改查)
2017/09/04 Python
python批量导入数据进Elasticsearch的实例
2018/05/30 Python
Python实现直方图均衡基本原理解析
2019/08/08 Python
python中的global关键字的使用方法
2019/08/20 Python
tensorflow模型保存、加载之变量重命名实例
2020/01/21 Python
森海塞尔美国官网:Sennheiser耳机与耳麦
2017/07/19 全球购物
澳大利亚拥有最好的家具和家居用品在线目的地:Nestz
2019/02/23 全球购物
大学生个人求职信范文
2013/09/21 职场文书
商场促销活动方案
2014/02/08 职场文书
国贸专业求职信
2014/06/28 职场文书
锅炉工岗位职责
2015/02/13 职场文书
公司环境卫生管理制度
2015/08/05 职场文书
2016年学校十一国庆节活动总结
2016/04/01 职场文书