表单事件简介

onfocus 元素获取焦点时触发
onblur 元素失去焦点时触发
onfocusin 元素即将获取焦点时触发
onfocusout 元素即将失去焦点时触发
oninput 元素获取用户输入时触发
onchange 该事件在表单元素的内容改变时触发
onsearch 用户向搜索域输入文本时触发 ( <input type="search">)
onselect 用户选取文本时触发 ( <input> 和 <textarea>)
onreset 表单重置时触发
onsubmit 表单提交时触发

提示：以上几个焦点事件触发的时机可以理解为一个简单的生命周期，都会触发，但有先后顺序。

onfocus 获取焦点事件

定义和用法：onfocus 事件在对象获得焦点时发生。
onfocus 通常用于 <input>, <select>, 和<a>
提示： onfocus 事件的相反事件为 onblur 事件。

代码块：

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>onfocus 获取焦点事件</title></head><head><script>function myFunction(x) {x.style.background = "yellow";}</script></head><body>输入你的名字: <input type="text" onfocus="myFunction(this)"><p>当输入框获取焦点时，修改背景色（background-color属性） 将被触发。</p></body>
</html>

onblur 失去焦点事件

定义和用法：onblur 事件会在对象失去焦点时发生。
onblur 经常用于Javascript验证代码，一般用于表单输入框

代码块：

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>onblur 失去焦点事件</title><script>function myFunction() {var x = document.getElementById("fname");alert("您输入了：" + x.value)x.value = x.value.toUpperCase();}</script></head><body>输入你的名字: <input type="text" id="fname" onblur="myFunction()"><p>当你离开输入框, 函数将被触发将输入文字转换成大写。</p></body>
</html>

onfocusin 即将获取焦点事件

定义和用法：onfocusin 事件在一个元素即将获得焦点时触发。
提示： onfocusin 事件类似于 onfocus 事件。主要的区别是 onfocus 事件不支持冒泡。因此，如果你想知道元素或者其子元素是否获取焦点，需要使用 onfocusin 事件。
提示：虽然 Firefox 浏览器不支持 onfocusin 事件，但你可以通过使用 onfocus （使用addEventListener()方法的可选参数 useCapture）的捕获监听事件来查看元素或其子元素是否获取焦点。
提示： onfocusin 事件的相反事件是 onfocusout 事件
注意：Firefox 浏览器不支持 onfocusout 事件。

代码块：

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>onfocusin 即将获取焦点</title></head><body>输入您的名字: <input type="text" onfocusin="myFunction(this)"><p>当 input 输入框获取焦点时，JavaScript 函数将被触发，并修改背景颜色。 </p><script>function myFunction(x) {x.style.background = "yellow";}</script></body>
</html>

onfocusout 即将失去焦点事件

定义和用法：onfocusout 事件在元素即将失去焦点时触发。
提示： onfocusout 事件类似于 onblur 事件。主要的区别是 onblur 事件不支持冒泡。因此，如果你需要查看元素或其子元素是否获取焦点，需要使用 onfocusout 事件。
提示：虽然 Firefox 不支持 onfocusout 事件，但你可以通过使用 onfocus （使用addEventListener()方法的可选参数 useCapture）的捕获监听事件来查看元素或其子元素是否失去焦点。
提示： onfocusout 事件的相反事件为 onfocusin 事件。
注意：Firefox 浏览器不支持 onfocusout 事件。

代码块：

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>onfocusout 即将失去焦点</title></head><body>输入您的名字： <input type="text" id="fname" onfocusout="myFunction()"><p>当你离开 input 输入框时，JavaScript函数将被触发，并将输入框中的小写字母转为大写。</p><script>function myFunction() {var x = document.getElementById("fname");x.value = x.value.toUpperCase();}</script></body>
</html>

oninput 输入事件

定义和用法：oninput 事件在用户输入时触发。
该事件在 <input> 或 <textarea> 元素的值发生改变时触发。
提示：该事件类似于 onchange 事件。不同之处在于 oninput 事件在元素值发生变化是立即触发， onchange 在元素失去焦点时触发。另外一点不同是 onchange 事件也可以作用于 <keygen> 和 <select> 元素

代码块：

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>oninput 输入事件</title></head><body><p>在文本框中尝试输入触发函数。</p><input type="text" id="myInput" oninput="myFunction()"><p id="demo"></p><script>function myFunction() {var x = document.getElementById("myInput").value;document.getElementById("demo").innerHTML = "你输入的是: " + x;}</script></body>
</html>

onchange 内容改变事件

定义和用法：onchange 事件会在域的内容改变时发生。
onchange 事件也可用于单选框与复选框改变后触发的事件

代码块：

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>onchange 内容改变事件</title></head><body>输入你的名字: <input type="text" id="fname" onchange="myFunction()"><p>当你离开输入框后，函数将被触发，将小写字母转为大写字母。</p><script>function myFunction() {var x = document.getElementById("fname");x.value = x.value.toUpperCase();}</script></body>
</html>

onselect 选取文本事件

定义和用法：onselect 事件会在文本框中的文本被选中时发生

代码块：

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>onchange 选取文本事件</title></head><body>一些文本: <input type="text" value="Hello world!" onselect="myFunction()"><script>function myFunction() {alert("你选中了一些文本");}</script></body>
</html>

onreset 表单重置事件和onsubmit 表单提交事件

定义和用法：onreset 事件在表单被重置后触发；onsubmit 事件在表单提交时触发

代码块：

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>onreset and onsubmit</title></head><body><p>当表单被重置后，触发函数并弹出提示信息。</p><form  action="demo-form.php" onsubmit="submitFunction()" onreset="resetFunction()">输入您的名字: <input type="text"><input type="reset" value="重置"><input type="submit" value="提交"></form><script>function resetFunction() {alert("表单已重置");}function submitFunction() {alert("表单已提交");}</script></body>
</html>

onsearch 向搜索框输入事件

定义和用法：onsearch 事件在用户按下"ENTER（回车）" 按键或点击 type=“search” 的 <input> 元素的 “x(搜索)” 按钮时触发。
注意：Internet Explorer, Firefox 或 Opera 12 及其更早版本不支持 onsearch 事件。

代码块：

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>onsearch 向搜索框输入事件</title></head><body><p>在搜索文本域中输入信息并按下 "ENTER" 键。</p><input type="search" id="myInput" onsearch="myFunction()"><p id="demo"></p><script>function myFunction() {var x = document.getElementById("myInput");document.getElementById("demo").innerHTML = "您搜索的内容为：" + x.value;}</script></body>
</html>

HTML表单事件，获取焦点时、失去焦点时、即将获取焦点时、即将失去焦点时、输入值时、选取文本时、表单元素的内容改变时、提交时....相关推荐

git提交时由于eslint的检测机制报错：npm run lint-staged:js found some errors
git提交时报了两条错误: 1.stylelint --syntax less found some errors. Please fix them and try committing again ...
JavaScript表单事件获取焦点：focus 失去焦点：blur 输入事件：input 变化事件：change
JavaScript表单事件焦点处理焦点处理主要包括focus(获取焦点)和blur(失去焦点)事件类型.所谓焦点,就是激活表单字段,使其可以响应键盘事件. 获取焦点:focus 当单击或使用Ta ...
鼠标事件、表单事件、键盘事件、焦点事件
事件介绍当我们点击一个按钮的时候,会弹出一个对话框.在JavaScript中, "点击"这个事情就看作一个事件."弹出对话框"其实就是我们在点击事件中做的一些 ...
史上最全的常用事件：移动端事件及PC端：鼠标/键盘/表单事件
PC端事件鼠标事件: onclick点击 onmouseover鼠标移入 onmouseout鼠标移出 onmousedown鼠标按下 onmouseup鼠标抬起 onmousemove鼠标移动 o ...
Day050--jQuery表单事件轮播图插件库 ajax
表单控件的事件 change()表单元素发生改变时触发事件 select()文本元素发生改变时触发事件 submit()表单元素发生改变时触发事件 .focus() 获取焦点 .blur() 释放焦点 ...
web前端学习笔记26-事件类型——一般事件、页面事件、表单事件
一.事件类型的分类事件分为一般事件.页面事件和表单事件二.一般事件关键字释义关键字释义 click 单击事件 dblclick 双击事件 mousemove 鼠标移动事件 mouseove ...
JavaScript学习第十六天（键盘事件、表单事件、拖拽事件、框架事件、媒体事件）
文章目录键盘事件表单事件剪贴板事件拖拽事件打印事件框架事件媒体事件总结键盘事件 onkeydown 键盘按下事件,当有按键按下时触发 onkeyup 键盘松开事件,当有按键被松开时触 ...
JavaScript的表单事件
表单事件 Submit 当提交表单时,触发 Change 当元素的值改变时,触发 Focus 当元素获得焦点时,触发 Blur 当元素失去焦点时,触发
JS-鼠标-键盘-文档-表单事件
JS-鼠标-键盘-文档-表单事件 1 回顾 1.1 节点创建.添加.删除.替换.克隆创建元素: document.createElement('标签名')添加子节点: 父元素.appendChild ...

HTML表单事件，获取焦点时、失去焦点时、即将获取焦点时、即将失去焦点时、输入值时、选取文本时、表单元素的内容改变时、提交时....

表单事件简介

onfocus 获取焦点事件

onblur 失去焦点事件

onfocusin 即将获取焦点事件

onfocusout 即将失去焦点事件

oninput 输入事件

onchange 内容改变事件

onselect 选取文本事件

onreset 表单重置事件和onsubmit 表单提交事件

onsearch 向搜索框输入事件

HTML表单事件，获取焦点时、失去焦点时、即将获取焦点时、即将失去焦点时、输入值时、选取文本时、表单元素的内容改变时、提交时....相关推荐

最新文章

热门文章