js实现文本框或文本域在用户输入时（oninput）触发事件，操作元素

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

且透明度为1。

<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），可用。相反，按钮透明度减一半，不可用。