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

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>

HTML5新增的表单事件:oninput、onkeyup、oninvalid相关推荐

HTML5新增input表单（HTML5）
HTML5新增input表单(HTML5) <!DOCTYPE html> <html lang="en"><head><meta cha ...
HTML5新增的表单类型
HTML5新增的表单类型整理时间:2017-10-4 整理人:info#haixia.net(将#替换成@,来信必复) 序号属性名称描述 1 number 仅限数值型数据,可设置区间范围与步长增 ...
JavaScript学习第十六天（键盘事件、表单事件、拖拽事件、框架事件、媒体事件）
文章目录键盘事件表单事件剪贴板事件拖拽事件打印事件框架事件媒体事件总结键盘事件 onkeydown 键盘按下事件,当有按键按下时触发 onkeyup 键盘松开事件,当有按键被松开时触 ...
史上最全的常用事件：移动端事件及PC端：鼠标/键盘/表单事件
PC端事件鼠标事件: onclick点击 onmouseover鼠标移入 onmouseout鼠标移出 onmousedown鼠标按下 onmouseup鼠标抬起 onmousemove鼠标移动 o ...
JS-鼠标-键盘-文档-表单事件
JS-鼠标-键盘-文档-表单事件 1 回顾 1.1 节点创建.添加.删除.替换.克隆创建元素: document.createElement('标签名')添加子节点: 父元素.appendChild ...
HTML表单事件，获取焦点时、失去焦点时、即将获取焦点时、即将失去焦点时、输入值时、选取文本时、表单元素的内容改变时、提交时....
表单事件简介 onfocus 元素获取焦点时触发 onblur 元素失去焦点时触发 onfocusin 元素即将获取焦点时触发 onfocusout 元素即将失去焦点时触发 oninput 元素获取用 ...
html5新特性表单控件,老生常谈h5新特性1:(表单)
老生常谈h5新特性1:(表单) HTML5新特性 -- 十大新特性 (1)新的语义标签和属性 (2)表单新特性 (3)视频和音频 (4)Canvas绘图 (5)SVG绘图 (6)地理定位 (7)拖放A ...
HTML5中将中文表单验证默认提示语句改为英文！
js代码: function checkEmail(){var email=document.getElementById("eject_email");if(email.valu ...
HTML——JS—表单事件+表单提交
目录表单事件表单提交表单事件 <!DOCTYPE html> <html><head><meta charset="utf-8"&g ...

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

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

HTML5新增的表单事件:oninput、onkeyup、oninvalid相关推荐

最新文章

热门文章