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),可用。相反,按钮透明度减一半,不可用。
js实现文本框或文本域在用户输入时(oninput)触发事件,操作元素的更多相关文章
- JS对输入判断变化屏蔽中文输入法输入时连续触发事件的方法
代码如下: //智能搜索提示 IntelligenceSearch: function IntelligenceSearch() { $('#keyWord').on('input', functio ...
- JS事件 内容选中事件(onselect)选中事件,当文本框或者文本域中的文字被选中时,触发onselect事件,同时调用的程序就会被执行。
内容选中事件(onselect) 选中事件,当文本框或者文本域中的文字被选中时,触发onselect事件,同时调用的程序就会被执行. 如下代码,当选中用户文本框内的文字时,触发onselect 事件, ...
- IE浏览器 下面的文本框,获得焦点后无法输入内容
今天遇到一个问题,在IE浏览器下面,我点击 按钮 弹出一个弹出层,里面有一个 文本编辑器和一个文本框,但是第二次弹出后,文本框和文本编辑器无法输入内容,在控制台用js代码测试 $(document) ...
- input文本框自适应文本内容宽度
input文本框自适应文本内容宽度 <!DOCTYPE html> <html> <head> <meta charset="utf-8" ...
- js获取触发事件的元素
//获取事件 var e = window.event; //获取元素 obj = e.target || e.srcElement; console.log(e); checkRepeat(e.ta ...
- Javascript实例技巧精选(7)—设置和获取文本框与文本域的光标位置(兼容IE和Chrome,Firefox)
>>点击这里下载完整html源码<< 截图如下: 本实例描述了如何用Javascript来控制和获取文本框/文本域的鼠标光标位置,以下代码兼容IE和Chrome,Firefox ...
- 解决一个无聊的问题,如何处理Java用户在dos被收集信息时拷贝带换行符的文本信息造成的while的多次循环(java解决Scanner.next在接收用户输入时出现多个换行的形况)[解决方案一]
问题描述: 用户在dos窗口输入的时候(web项目不会出现这样的问题,所以这个问题日常碰不到),摁下回车时,Scanner对象的next()扫描用户输入的文本,后面就可以根据输入的字符串进行判断,并执 ...
- JS实现文本框和文本域获取焦点focus()时,光标在本文的末尾
<!-- <input type="text" id="test1" name="test1" value="test ...
- 修改文本框和文本域placeholder样式
input::-webkit-input-placeholder, textarea::-webkit-input-placeholder { font-size:20px; padding:20px ...
随机推荐
- 在C#中Color结构的各属性颜色对照表(转)
转自:http://blog.sina.com.cn/s/blog_454dc49501016q2p.html Color.AliceBlue 240,248,255 Color.LightSalmo ...
- Win7下Redmine2.0.3+Mysql55+Ruby1.8.7成功安装记录分享
准备软件: Ruby 下载网页: http://rubyforge.org/frs/?group_id=167&release_id=46836 http://files.rubyforge. ...
- PreparedStatemnet预编译操作数据库的增删改
/**************PreparedStatemnet使用******************/ /*特点:相当于ADO.NET中的参数化命令对象 * 1.预编译,执行相同的sql语句,提 ...
- Javascript实例技巧精选(8)—计算当月剩余天数
>>点击这里下载完整html源码<< 截图如下: 利用Javascript在网页上计算当前月份的剩余天数,相应代码如下: <script language="J ...
- Hdu 1016 Prime Ring Problem (素数环经典dfs)
Prime Ring Problem Time Limit: 4000/2000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Other ...
- Foundation 学习笔记
笔记内容 学习笔记-段玉磊 Stanford course Foundation and Attributed Strings Dynamic binding id 是一个指向任何未知对象的指针,(t ...
- warfare(最大生成树裸题)
战争 [问题 ...
- VS2003与Win7的兼容性问题
VS2003并不官方支持Win7,目前大家遇到的主要是两个问题: 1. 在debug的时候,*.pdb文件在会被devenv.exe给lock住,当调适过一次之后,再进行编译的时候会有lnk1201的 ...
- ul和li实现分两列(多列)布局显示
简单语句实现DIV+CSS分两列(多列)布局显示 <style type="text/css"> .my ul { width: 210px; } .my li { w ...
- 启动tomcat报host-manager does not exist or is not a readable directory异常
新安装了一个tomcat6,安装完之后在webapps下面会有一些tomcat自带的项目(ROOT.manager.host-manager...) 把这些没用的项目删掉之后,启动tomcat 报如下 ...