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

    IOC容器在框架中的应用 前言 在上一篇我大致的介绍了这个系列所涉及到的知识点,在本篇我打算把IOC这一块单独提取出来讲,因为IOC容器在解除框架层与层之间的耦合有着不可磨灭的作用.当然在本系列前面的 ...

  2. iOS基础 - Quartz 2D绘图的基本步骤

    一.使用Quartz 2D绘图的基本步骤 1) 获取上下文context(绘制图形的地方) 2) 设置路径(路径是用来描述形状的) 3)  将路径添加到上下文 4)  设置上下文属性(设置颜色,线宽, ...

  3. [Usaco2008 Dec]Patting Heads 轻拍牛头[筛法]

    Description   今天是贝茜的生日,为了庆祝自己的生日,贝茜邀你来玩一个游戏.     贝茜让N(1≤N≤100000)头奶牛坐成一个圈.除了1号与N号奶牛外,i号奶牛与i-l号和i+l号奶 ...

  4. Restful?

    为什么要Restful?为什么不Restful?   本随笔不说为什么要Restful,只说为什么不Restful.首先Http是超文本转移协议而不是控制协议.通常文档中也会使用“资源”来指代超文本. ...

  5. pydev去掉右边的预览栏minimap

    eclipse pydev: preferences > PyDev > Editor > Overview Ruler Minimap

  6. 使用NeatUpload控件实现ASP.NET大文件上传

    使用NeatUpload控件实现ASP.NET大文件上传 一般10M以下的文件上传通过设置Web.Config,再用VS自带的FileUpload控件就可以了,但是如果要上传100M甚至1G的文件就不 ...

  7. ORA-12520错误解决方法

    ORA-12520监听程序无法为请求的服务器类型找到可用的处理程序 以下不知道是不是解决方法的方法,因为我只重启下oracle服务就好了,并没进行任何修改 引用别人的文章: 1)数据库是专用服务器,但 ...

  8. easyui小清新俺也晒晒 视频管理软件bs项目

    easyui小清新俺也晒晒 视频管理软件bs项目 针对设备的管理软件 这是我听到最多的话.视频管理软件bs项目.easyui 好与坏我不去评价 项目做了好几个月,其实代码看来也没用多少,但是做需求,时 ...

  9. django User model

    django User model operation this tutorial will guide us to know how to manipulate django User model. ...

  10. Arduino 串口篇 Arduino发送二进制 send binary via RS232-to-USB to PC

    有用的链接在这里:http://hi.baidu.com/mizuda/item/06b7fdc1d0e45a0ec710b2dd 更加详细的内容请查阅Arduino官方:http://arduino ...