写在前面:给不同的文本框设定同样的效果,当文本框没有内容输入时,‘下一步’按钮不可用且透明度为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)触发事件,操作元素的更多相关文章

  1. JS对输入判断变化屏蔽中文输入法输入时连续触发事件的方法

    代码如下: //智能搜索提示 IntelligenceSearch: function IntelligenceSearch() { $('#keyWord').on('input', functio ...

  2. JS事件 内容选中事件(onselect)选中事件,当文本框或者文本域中的文字被选中时,触发onselect事件,同时调用的程序就会被执行。

    内容选中事件(onselect) 选中事件,当文本框或者文本域中的文字被选中时,触发onselect事件,同时调用的程序就会被执行. 如下代码,当选中用户文本框内的文字时,触发onselect 事件, ...

  3. IE浏览器 下面的文本框,获得焦点后无法输入内容

    今天遇到一个问题,在IE浏览器下面,我点击 按钮  弹出一个弹出层,里面有一个 文本编辑器和一个文本框,但是第二次弹出后,文本框和文本编辑器无法输入内容,在控制台用js代码测试 $(document) ...

  4. input文本框自适应文本内容宽度

    input文本框自适应文本内容宽度 <!DOCTYPE html> <html> <head> <meta charset="utf-8" ...

  5. js获取触发事件的元素

    //获取事件 var e = window.event; //获取元素 obj = e.target || e.srcElement; console.log(e); checkRepeat(e.ta ...

  6. Javascript实例技巧精选(7)—设置和获取文本框与文本域的光标位置(兼容IE和Chrome,Firefox)

    >>点击这里下载完整html源码<< 截图如下: 本实例描述了如何用Javascript来控制和获取文本框/文本域的鼠标光标位置,以下代码兼容IE和Chrome,Firefox ...

  7. 解决一个无聊的问题,如何处理Java用户在dos被收集信息时拷贝带换行符的文本信息造成的while的多次循环(java解决Scanner.next在接收用户输入时出现多个换行的形况)[解决方案一]

    问题描述: 用户在dos窗口输入的时候(web项目不会出现这样的问题,所以这个问题日常碰不到),摁下回车时,Scanner对象的next()扫描用户输入的文本,后面就可以根据输入的字符串进行判断,并执 ...

  8. JS实现文本框和文本域获取焦点focus()时,光标在本文的末尾

    <!-- <input type="text" id="test1" name="test1" value="test ...

  9. 修改文本框和文本域placeholder样式

    input::-webkit-input-placeholder, textarea::-webkit-input-placeholder { font-size:20px; padding:20px ...

随机推荐

  1. 老调重弹--面向对象设计原则--S.O.L.I.D设计原则

    SRP - 单一职责原则 全称:Single Responsibility Principle 定义:每一个上下文对象(类.函数.变量等等)的定义应该仅仅包含单一的职责 描述:对象提供单一职责的高度封 ...

  2. Oracle汇总笔记

    http://gzf_PC:1158/em数据库配置文件已经安装到 D:\WorkC,同时其他选定的安装组件也已经安装到 D:\WorkC\oracle.iSQL*Plus URL 为:http:// ...

  3. JavaScript实例技巧精选(14)—动态变化背景颜色

    >>点击这里下载完整html源码<< 这是截图: 网页背景颜色随时间变化,核心代码如下: <SCRIPT LANGUAGE="JavaScript"& ...

  4. VS20XX-Add-In插件开发

    参考文章: 1:http://www.cnblogs.com/hecool/archive/2013/04/06/3002822.html 2: http://www.cnblogs.com/ande ...

  5. Extjs树形控件入门

    Extjs树形控件由Ext.tree.TreePanel类定义,控件的名称为TreePanel,TreePanel继承自Panel类,在Extjs中使用树形控件其实很简单. 大家知道要使用Extjs必 ...

  6. 让VS2010记住TFS的登陆用户名和密码

    用VS进行团队开发的都知道,每次打开VS连接TFS的时候,都要提示输入用户名和密码,每次都这样无疑感觉太多此一举了(当然你不想别人操作你的电脑就直接进入项目就没必要这么做),为了像连接远程那样可以记住 ...

  7. 尝试使用Memcached

    尝试使用Memcached遇到的狗血问题   乘着有时间,尝试下利用Memcached进行分布式缓存,其中遇到了不少问题及狗血的事情,开篇记录下,希望对您有帮助. 我之前的项目为:Asp.Net MV ...

  8. JS列表的下拉菜单组件(仿美化控件select)

    JS列表的下拉菜单组件(仿美化控件select) 2014-01-23 23:51 by 龙恩0707, 1101 阅读, 6 评论, 收藏, 编辑 今天是农历23 也是小年,在这祝福大家新年快乐!今 ...

  9. Linq to sql 结

    ----左链接 var LeftJoin = from emp in ListOfEmployees join dept in ListOfDepartment on emp.DeptID equal ...

  10. centos安装及配置

    centos安装 从网上下载最新的版本,用ultraiso做好系统盘,启动.安装过程没有什么可以说的,与其他发行版有点不同的是需要将安装包放到u盘根目录下(u盘容量最好大点,8~16G最好).开始没注 ...