写在前面:给不同的文本框设定同样的效果,当文本框没有内容输入时,‘下一步’按钮不可用且透明度为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),可用。相反,按钮透明度减一半,不可用。