您的位置：首页 > Web前端 > HTML5

HTML5新增的表单事件:oninput、onkeyup、oninvalid

2019-05-24 13:53 1126 查看

HTML5新增的表单事件:oninput、onkeyup、oninvali

1：oninput 监听当前指定元素内容的改变；只要内容改变（添加元素，删除元素），就会触发这个事件

2：onkeyup 键盘弹起时触发，每一个键弹起时都会触发

3：oninvalid：当验证不通过时触发

为了方便大家理解运用，我做了一个简单的案例，供大家参考

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/html">
<head>
<meta charset="UTF-8">
<title>XPR</title>
</head>
<body>

<from>
<!--autofocus属性：自动获取焦点-->
用户名： <input type="text" name="username" id="username" autofocus></br>
手机号：<input type="tel" name="userphoone" id="userphoone" pattern="^1\d{10}&"></br>  //pattern:正则表达式
<input type="submit" value="提交"></br>
</from>

<!--事件-->
<script>

// oninput：监听当前指定元素内容的改变；只要内容改变（添加元素，删除元素），就会触发这个事件
document.getElementById("username").oninput=function () {
console.log("oninput:"+this.value);
}

//onkeyup ：键盘弹起时触发，每一个键弹起时都会触发
document.getElementById("username").onkeyup=function () {
console.log("onkeyup:"+this.value);
}

//  oninvalid：当验证不通过时触发
document.getElementById("userphoone").oninvalid=function () {
this.setCustomValidity()  //设置默认的提示信息
}
</script>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航