HTML表单事件，获取焦点时、失去焦点时、即将获取焦点时、即将失去焦点时、输入值时、选取文本时、表单元素的内容改变时、提交时....-装备图鉴-幻域先锋装备百科网

表单事件简介

onfocus 元素获取焦点时触发

onblur 元素失去焦点时触发

onfocusin 元素即将获取焦点时触发

onfocusout 元素即将失去焦点时触发

oninput 元素获取用户输入时触发

onchange 该事件在表单元素的内容改变时触发

onsearch 用户向搜索域输入文本时触发 ( )

onselect 用户选取文本时触发 ( 和 ) 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)"> 当输入框获取焦点时，修改背景色（background-color属性）将被触发。 </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()"> 当你离开输入框, 函数将被触发将输入文字转换成大写。 </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)"> 当 input 输入框获取焦点时，JavaScript 函数将被触发，并修改背景颜色。 <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()"> 当你离开 input 输入框时，JavaScript函数将被触发，并将输入框中的小写字母转为大写。 <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> 在文本框中尝试输入触发函数。 <input type="text" id="myInput" oninput="myFunction()"> <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()"> 当你离开输入框后，函数将被触发，将小写字母转为大写字母。 <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> 当表单被重置后，触发函数并弹出提示信息。 <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> 在搜索文本域中输入信息并按下 "ENTER" 键。 <input type="search" id="myInput" onsearch="myFunction()"> <script> function myFunction() { var x = document.getElementById("myInput"); document.getElementById("demo").innerHTML = "您搜索的内容为：" + x.value; } </script> </body> </html> </div> </div> </article> </div> </div> </div> </div> <div style="position: relative;bottom: 10px;margin: 0 auto;left: 0;right: 0;text-align: center;"> Copyright © 2088 幻域先锋装备百科网 All Rights Reserved. <div style="text-align: center;"> 友情链接 <script> var _mtj = _mtj || []; (function () { var mtj = document.createElement("script"); mtj.src = "https://node91.aizhantj.com:21233/tjjs/?k=gdvpk3plqch"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(mtj, s); })(); </script> </div> </div> <div id="scroll-top"></div> </div> </div> <a href="#" class="trx_addons_scroll_to_top trx_addons_icon-up" title="Scroll to top"></a> <script type="text/javascript" src="/static/js/jquery.magnific-popup.min.js" id="magnific-popup-js"></script> <script type="text/javascript" src="/static/js/animsition.js" id="animsition-js"></script> <script type="text/javascript" src="/static/js/easing.js" id="easing-js"></script> <script type="text/javascript" src="/static/js/fitvids.js" id="fitvids-js"></script> <script type="text/javascript" src="/static/js/main.js" id="pollock-theme-script-js"></script> <script type="text/javascript" src="/static/js/comment-reply.min.js" id="comment-reply-js" async="async" data-wp-strategy="async"></script> <script type="text/javascript" src="/static/js/__scripts.js" id="trx_addons-js"></script> <script id="shopping-cart-items-updater" type="text/javascript"></script> </body> </html>