选择文本
当在文本框或文本区域内选择文本时,将触发select事件。通过该事件,可以设计用户选择操作的交互行为。
在IE9+、Opera、Firefox、Chrome和Safari中,只有用户选择了文本,而且要释放鼠标,才会触发select事件;但是在IE8及更早版本中,只要用户选择了一个字母,不必释放鼠标,就会触发select事件。另外,在调用select()方法时也会触发select事件。
示例:选择第一个文本框中的文本时,在第二个文本框中动态显示用户所选择的文本。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<input type="text" id="a" value="请随意选择字符串" />
<input type="text" id="b"/>
<script>
var a = document.getElementsByTagName("input")[0];
var b = document.getElementsByTagName("input")[1];
a.onselect = function(){
var o = document.selection.createTextRange();//创建一个选择区域
if(o.text.length > 0){//如果选择区域存在文本
b.value = o.text;//赋值给b
}else{
p1 = a.selectionStart;//获取文本框中选择的初始位置
p2 = a.selectionEnd;//获取文本框中选择的结束位置
b.value = a.value.substring(p1, p2)
}
}
</script>
</body>
</html>
字段值变化检测
change事件类型是在表单元素的值发生变化时触发,它主要用于input、select和textarea元素。对于input和textarea元素来说,当它们失去焦点且value值改变时触发;对于select元素,在其选项改变时触发,也就是说不失去焦点,也会触发change事件
示例1:当在第一个文本框输入或修改值时,第二个文本框会立即显示第一个文本框的值
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<input type="text" id="a"/>
<input type="text" id="b"/>
<script>
var a = document.getElementsByTagName("input")[0];
var b = document.getElementsByTagName("input")[1];
a.onchange = function(){
b.value = this.value;
}
</script>
</body>
</html>
示例2:在单选按钮选项组中动态显示变化的值
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<input type="radio" name="r" value="1" checked="checked"/>1
<input type="radio" name="r" value="2" />2
<input type="radio" name="r" value="3" />3
<script>
var r = document.getElementsByTagName("input");
for(var i = 0; i < r.length; i++){
r[i].onchange = function(){
alert(this.value);
}
}
</script>
</body>
</html>
对于input元素来说,由于change事件类型仅在用户已经离开了元素,且失去焦点时触发,所以当执行上上面的例子时,会感觉到延迟现象。为了更好的提高用户体验,很多时候会根据需要定义在按钮松开或鼠标单击时执行响应,这样速度会快很多。
示例:设计一个文本框,只允许输入数值。利用focus事件修改文本框的背景颜色,以便更清楚的表明这个字段获得了焦点。利用blur事件恢复背景,利用change事件在用户输入非数字时改变颜色。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<form id="myform" method="post" action="javascript:alert('提交')">
<p><label for="comments">请输入数字:</label><br>
<input type="text" id="txtNumbers" name="numbers"/></p>
<p><input type="submit" value="提交表单" id="submit-btn"/></p>
</form>
<script>
var form = document.getElementById("myform");
var numbers = form.elements["numbers"];
numbers.onfocus = function(event){
event = event || window.event;
var target = event.target || event.srcElement;
target.style.backgroundColor = "yellow";
}
numbers.onblur = function(){
event = event || window.event;
var target = event.target || event.srcElement;
if(/[^\d]/.test(target.value)){
target.style.backgroundColor = "red";
}else{
target.style.backgroundColor = "";
}
}
numbers.onchange = function(){
event = event || window.event;
var target = event.target || event.srcElement;
if(/[^\d]/.test(target.value)){
target.style.backgroundColor = "red";
}else{
target.style.backgroundColor = "";
}
}
</script>
</body>
</html>
文本框获取焦点:
正确输入数字:
错误的输入其他字符: