js实现文本框或文本域在用户输入时(oninput)触发事件,操作元素

时间:2021-11-05 08:52:07

写在前面:给不同的文本框设定同样的效果,当文本框没有内容输入时,‘下一步’按钮不可用且透明度为0.5。当有内容输入时(并不是获得焦点时focus),‘下一步’按钮状态可用,

且透明度为1。

js实现文本框或文本域在用户输入时(oninput)触发事件,操作元素js实现文本框或文本域在用户输入时(oninput)触发事件,操作元素

<script>
window.onload
= function () {
var arrAccount = ['BankAccount', 'AlipayAccount'];
var alpha = 50;
for (var i = 0; i < arrAccount.length; i++) {
document.getElementById(arrAccount[i]).oninput
= function () {
if (this.value != '') {
alpha
= 100;
document.getElementById(
this.id + '_btn').style.opacity = alpha / 100;
document.getElementById(
this.id + '_btn').style.filter = 'alpha(opacity=' + alpha + ')';
document.getElementById(
this.id + '_btn').disabled = false;
}
else {
alpha
= 50;
document.getElementById(
this.id + '_btn').style.opacity = alpha / 100;
document.getElementById(
this.id + '_btn').style.filter = 'alpha(opacity=' + alpha + ')';
document.getElementById(
this.id + '_btn').disabled = true;
}
}
}

}
</script>

1.定义数组把需要实现此功能的元素的id存储起来

2.因为alpha在IE和其他浏览器的设置写法不一样,所以这里给一个数值方便后面两种写法

3.遍历数组,并给数组里的每个成员赋oninput事件,该事件在用户尝试在input或textarea中尝试输入时触发

4.判断元素是否有内容,如不为空即有内容输入,this.id获取当前元素的id,拼接字符串之后获取的则是对应的‘下一步’按钮,所以这里按钮的id取名也是有固定格式的,方便调配

5.给按钮进行样式更改,如果有内容,按钮变亮(透明度1),可用。相反,按钮透明度减一半,不可用。