h5 新增的invalid事件，貌似有很大bug
Posted 焦虑的soul
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了h5 新增的invalid事件，貌似有很大bug相关的知识，希望对你有一定的参考价值。
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
form{
width: 640px;
margin:0 auto;
}
input{
display: block;
width: 100%;
height: 25px;
margin-bottom:20px;
}
</style>
</head>
<body>
<form>
<fieldset>
<legend>表单</legend>
<!--<label>
用户名：<input type="text" name="username" class="username"/>
</label>-->
<label>
tel：<input type="tel" name="tel" class="tel" pattern="^1[0-9]{10}$"/>
</label>
<input type="submit" value="提交数据" id="submit"/>
</fieldset>
</form>
<script>
var userName=document.querySelector(‘.username‘);
var tel=document.querySelector(‘.tel‘);
function fn(){
console.log(typeof this.value);
this.setCustomValidity(‘输入格式有误，11位数字！‘);//此处必须指定为this
}
tel.addEventListener(‘invalid‘,fn)
</script>
</body>
</html>
bug: 当第一次输入的电话号码不正确的时候，不刷新页面，输入正确的电好号码， 还是不断提示验证不通过，，除非刷新页面，第一次就直接输入正常电话号码，就不会触发invalid事件
以上是关于h5 新增的invalid事件，貌似有很大bug的主要内容，如果未能解决你的问题，请参考以下文章
移动端h5网页遇到一个兼容性bug,我添加长按事件在苹果会弹出个放大镜，会把我自己加的长按事件挤掉