写在前面:给不同的文本框设定同样的效果,当文本框没有内容输入时,‘下一步’按钮不可用且透明度为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. 【转】Android 网络通信框架Volley简介(Google IO 2013)

    Volley主页 https://android.googlesource.com/platform/frameworks/volley http://www.youtube.com/watch?v= ...

  2. jQuery在html有效,在jsp无效的原因

    最近用jQuery来写下拉框的选项值的左右移动,代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN& ...

  3. 【Oracle】-【插入读取顺序】-插入读取之间的顺序关系

    Oracle插入记录的顺序是否是读取的顺序? 通过一个简单的实验验证: SQL> create table t ( x int, a char(2000) default 'x', b char ...

  4. ASP.Net中应用百度编辑器(UEditor)上传图片和上传附件失败-解决方案

    第一步: 第二步: 第三步: 第四步:

  5. boost------ref的使用(Boost程序库完全开发指南)读书笔记

    STL和Boost中的算法和函数大量使用了函数对象作为判断式或谓词参数,而这些参数都是传值语义,算法或函数在内部保修函数对象的拷贝并使用,例如: #include "stdafx.h&quo ...

  6. c语言:最长对称子串(3种解决方案)

    问题描述: 输入一个字符串,输出该字符串中最大对称子串的长度.例如输入字符串:“avvbeeb”,该字符串中最长的子字符串是“beeb”,长度为4,因而输出为4. 解决方法:中序遍历 一,全遍历的方法 ...

  7. jQuery实现返回顶部功能

    整理两个实现功能,一个是右下角的返回顶部,一个是右侧的返回顶部,分别如图               第一种实现 一.JSP或HTML(主体结构) 在body中添加 <body id=" ...

  8. 什么是LeapMotion

    LeapMotion预览——什么是LeapMotion LeapMotion预览 这个就是LeapMotion: 原文转自:   LeapMotion预览 LeapMotion 官网:http://l ...

  9. POJ 1654 Area

    题意:从原点出发,沿着8个方向走,每次走1个点格或者根号2个点格的距离,最终回到原点,求围住的多边形面积. 分析:直接记录所经过的点,然后计算多边形面积.注意,不用先保存所有的点,然后计算面积,边走变 ...

  10. JS、JQuery和ExtJs动态创建DOM对象

    做了个简单使用JavaScript.JQuery.ExtJs进行DOM对象创建的测试,主要是使用JavaScript.JQuery.ExtJs动态创建Table对象.动态Table数据填充.多选控制. ...