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-animation实现逐帧动画效果
Mar 10 HTML / CSS
详解Sticky Footer 绝对底部的两种套路
Nov 03 HTML / CSS
如何让IE9以下版本(ie6/7/8)认识html5元素
Apr 01 HTML / CSS
html5 Web SQL Database 之事务处理函数transaction与executeSQL解析
Nov 07 HTML / CSS
canvas需要在标签里直接定义宽高
Dec 17 HTML / CSS
通过HTML5规范搞定i、em、b、strong元素的区别
Mar 04 HTML / CSS
html5实现图片转圈的动画效果——让页面动起来
Oct 16 HTML / CSS
HTML5 新表单类型示例代码
Mar 20 HTML / CSS
详解canvas绘图时遇到的跨域问题
Mar 22 HTML / CSS
AmazeUI 单选框和多选框的实现示例
Aug 18 HTML / CSS
纯CSS实现hover图片pop-out弹出效果的实例代码
Apr 16 HTML / CSS
css实现左上角飘带效果的完整代码
Mar 18 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 smarty函数扩展
2010/03/15 PHP
php在数组中查找指定值的方法
2015/03/17 PHP
在Linux系统的服务器上隐藏PHP版本号的方法
2015/06/06 PHP
WordPress中设置Post Type自定义文章类型的实例教程
2016/05/10 PHP
PHP中文字符串截断无乱码解决方法
2016/10/10 PHP
PHP中使用OpenSSL生成证书及加密解密
2017/02/05 PHP
php数据序列化测试实例详解
2017/08/12 PHP
js data日期初始化的5种方法
2013/12/29 Javascript
判断字符串的长度(优化版)中文占两个字符
2014/10/30 Javascript
简易的投票系统以及js刷票思路和方法
2015/04/07 Javascript
使用jquery实现的循环连续可停顿滚动实例
2016/11/23 Javascript
javaScript嗅探执行神器-sniffer.js
2017/02/14 Javascript
为什么使用koa2搭建微信第三方公众平台的原因
2018/05/16 Javascript
使用Vuex解决Vue中的身份验证问题
2018/09/28 Javascript
微信小程序自定义组件传值 页面和组件相互传数据操作示例
2019/05/05 Javascript
简单了解小程序+node梳理登陆流程
2019/06/24 Javascript
VUE.CLI4.0配置多页面入口的实现
2019/11/25 Javascript
[04:09]2018年度DOTA2社区贡献奖-完美盛典
2018/12/16 DOTA
python网络编程学习笔记(九):数据库客户端 DB-API
2014/06/09 Python
pygame学习笔记(2):画点的三种方法和动画实例
2015/04/15 Python
python使用logging模块发送邮件代码示例
2018/01/18 Python
python爬虫超时的处理的实例
2018/12/19 Python
情人节快乐! python绘制漂亮玫瑰
2020/08/18 Python
python scatter散点图用循环分类法加图例
2019/03/19 Python
Python 计算任意两向量之间的夹角方法
2019/07/05 Python
深入了解python中元类的相关知识
2019/08/29 Python
Django高并发负载均衡实现原理详解
2020/04/04 Python
Python调用shell cmd方法代码示例解析
2020/06/18 Python
使用python脚本自动生成K8S-YAML的方法示例
2020/07/12 Python
英国现代、当代和设计师家具店:Furntastic
2020/07/18 全球购物
家居装修公司创业计划书范文
2014/03/20 职场文书
企业员工薪酬方案
2014/06/04 职场文书
学校领导班子四风问题整改意见
2014/10/02 职场文书
庆祝教师节主题班会
2015/08/17 职场文书
Python 多线程处理任务实例
2021/11/07 Python
利用Python实现模拟登录知乎
2022/05/25 Python