HTML表单事件,获取焦点时、失去焦点时、即将获取焦点时、即将失去焦点时、输入值时、选取文本时、表单元素的内容改变时、提交时....
input>提示:以上几个焦点事件触发的时机可以理解为一个简单的生命周期,都会触发,但有先后顺序。
表单事件简介
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>
开放原子开发者工作坊旨在鼓励更多人参与开源活动,与志同道合的开发者们相互交流开发经验、分享开发心得、获取前沿技术趋势。工作坊有多种形式的开发者活动,如meetup、训练营等,主打技术交流,干货满满,真诚地邀请各位开发者共同参与!
更多推荐
所有评论(0)