<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<input type="text"><br>
<input type="text"><br>
<input type="text"><br>
<input type="text"><br>
<input type="text"><br>
<input type="text"><br>
<input type="text"><br>
<input type="text"><br>
<input type="button" value=" 提交 ">
<script>
var inputs = document.getElementsByTagName('input');
for (var i = 0; i < inputs.length; i++) {
var input = inputs[i];
// 判断input是否是文本框
if (input.type !== 'text') {
continue;
}
// 让当前正在输入的文本框 高亮显示
input.onfocus = function () {
// 让所有的文本框去掉高亮的效果
for (var i = 0; i < inputs.length; i++) {
var input = inputs[i];
if (input.type !== 'text') {
continue;
}
// 去除所有文本框高亮显示
input.style.backgroundColor = '';
}
// 当前文本框高亮显示
this.style.backgroundColor = 'lightgray';
}
}
</script>
</body>
</html>
样式操作案例4-高亮显示背选中的文本框
猜你喜欢
转载自www.cnblogs.com/jiumen/p/11405044.html
今日推荐
周排行