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#边边角角(一)
前言 此篇为在学习C#基础时,熟悉C#的语法和高级特性的一些小的尝试和笔记,记录一下以供分享 集合初始化器 集合必须实现System.Collections.IEnumerable接口 集合必须包含A ...
- 生活小助手--Android项目
每次想做一个Android项目都不知道要怎么开始,所谓前期工作,都是辅助于项目能顺利完成而做的. 每一个项目开始都要有几首准备: 第一,项目要做什么? 第二,项目中有那些版块? 项目的概要设计 项目流 ...
- ASP.NET请求处理过程
当请求一个*.aspx文件的时候,这个请求会被inetinfo.exe进程截获,它判断文件的后缀(aspx)之后,将这个请求转交给Aspnet_isapi.dll,aspnet_isapi.dll会通 ...
- linux sar 命令详解(转载)
linux sar 命令详解 2013-04-01 11:05 [小 大] 来源: 开源中国社区 评论: 0 分享至: 百度权重查询 词库网 网站监控 服务器监控 SEO监控 手机游戏 iPhone游 ...
- zxing二维码扫描的流程简析(Android版)
目前市面上二维码的扫描似乎用开源google的zxing比较多,接下去以2.2版本做一个简析吧,勿喷... 下载下来后定位两个文件夹,core和android,core是一些核心的库,android是 ...
- 松瀚SN8P2501 定时器初始化程序--汇编源码
/* 松瀚 SN8P2501B 定时器初始化程序 */ INI_IRQ: ;定时器T0初始化 MOV A, #01100000b ;定时器模式Fcpu/4 16M/4/4=1M 1U计一次 B0MOV ...
- psql: FATAL: role “postgres” does not exist 解决方案
当时想做的事情,是运行一个创建数据库的脚本.找到的解决方案差不多和下面这个链接相同. http://stackoverflow.com/questions/15301826/psql-fatal-ro ...
- Nutch搜索引擎Solr简介及安装
Nutch搜索引擎(第2期)_ Solr简介及安装 1.Solr简介 Solr是一个高性能,采用Java5开发,基于Lucene的全文搜索服务器.同时对其进行了扩展,提供了比Lucene更为丰富的 ...
- 表达式树解析"框架"
干货!表达式树解析"框架"(2) 为了过个好年,我还是赶快把这篇完成了吧 声明 本文内容需要有一定基础的开发人员才可轻松阅读,如果有难以理解的地方可以跟帖询问,但我也不一定能回 ...
- Web API 2中的属性路由
Web API 2中的属性路由 前言 阅读本文之前,您也可以到Asp.Net Web API 2 系列导航进行查看 http://www.cnblogs.com/aehyok/p/3446289.ht ...