写在前面:给不同的文本框设定同样的效果,当文本框没有内容输入时,‘下一步’按钮不可用且透明度为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. Js Date泣血整理

    原文:Js Date泣血整理 JS Date 对象用于处理日期和时间. 创建 Date 对象的语法: var myDate=new Date() Date 对象会自动把当前日期和时间保存为其初始值. ...

  2. Redmine(Ruby)配置经验

    Redmine(Ruby)配置经验记录在配置Redmine邮件同步过程中遇到的各种问题与解决方法 1. 如何安装Redminehttp://www.redmine.org/projects/redmi ...

  3. 64位平台支持大于2 GB大小的数组

    64位平台支持大于2 GB大小的数组 64位平台.NET Framework数组限制不能超过2GB大小.这种限制对于需要使用到大型矩阵和向量计算的工作人员来说,是一个非常大问题. 无论RAM容量有多大 ...

  4. 简单的三层asp.net webForm使用Ninject实现Ioc

    简单的三层asp.net webForm使用Ninject实现Ioc 在asp.net webform下使用Ninject的简单过程. 首先建立个项目,如下图,简单三层(PS:UI层要同时引用BLL. ...

  5. Knockout 可扩展性

    你需要知道的顶级特性 Knockout 最棒的一个特点就是它的可扩展性.Knockout 存在大量的扩展点,包含大量的工具来创建我们的应用程序.许多开发者除了 Knockout 核心库之外没有使用任何 ...

  6. nginx 重定向到index.php

    location /keywords {                index index.php;                try_files $uri $uri/ /keywords/i ...

  7. Mason 简单笔记

    Mason的对象 ------------------------------- Request对象 Mason有两个全局预处理对象叫做:$r和$m $r是mod_perl的请求对象,它提供了Perl ...

  8. ContentResolver + SqliteOpenHelper + ContentProvider 理解

    惭愧,现在才接触到ContentResolver的用法 这个类主要是Android用来实现应用程序之间数据共享的 一个应用程序可以将自己的数据完全暴露出去,外界更本看不到,也不用看到这个应用程序暴露的 ...

  9. socket网络编程快速上手(二)——细节问题(4)

    5.慢系统调用及EINTR 还记得前面readn和writen函数么?里面有个EINTR,现在就来谈谈这个,这个很重要. Linux世界有个叫信号的东西,感觉他就像一位隐士,很少遇到他,而他又无处不在 ...

  10. 简单的mvc之一:简单的开始

    mvc学习到现在,相对所学到的一系列的知识做一个总结,于是就有了这个标题—简单的mvc.文如名,写的是简单的mvc的知识,目标群也不言而喻.这一篇来个简单的开始,从头建立一个web项目,比如hello ...