zoukankan      html  css  js  c++  java
  • 【学习】文本框输入监听事件oninput

    真实项目中遇到的,需求是:一个文本框,一个按钮,当文本框输入内容时,按钮可用,当删除内容时,按钮不可用。

    刚开始用的focus和blur,

    $(".pay-text").focus(function(){

                       $(".pay-btn").attr("disabled",false);

                       });

             $(".pay-text").blur(function(){

                       $(".pay-btn").attr("disabled",true);

                       });

    自然是不行的,文本框获得焦点后,按钮不可用,要输入进内容,按钮才可用。又试了keyup事件

    $(".pay-text").keyup(function(){

           $(".pay-btn").attr("disabled",false);

           });

    输入是实现了,但是当把输入的内容删除时,按钮不可用没有实现。加入if判断

                       if($(this).val==""){

                                $(".pay-btn").attr("disabled",true);

                                }

                       else{

                                $(".pay-btn").attr("disabled",false);

                                }

    删除还是不起作用。

    最后找到了最完美的事件,oninput

    定义和用法:

    http://www.runoob.com/jsref/event-oninput.html

    原文引用:“oninput 事件在用户输入时触发。

    该事件在 <input> 或 <textarea> 元素的值发生改变时触发。

    提示: 该事件类似于 onchange 事件。不同之处在于 oninput 事件在元素值发生变化时立即触发, onchange 在元素失去焦点时触发。”

    ie8以下是不支持的,还好我这个项目只在移动端使用,于是最后的代码为:

    html:

    <input type="text" class="pay-text" placeholder="输入金额" oninput="moneyChange(this)">

    <input type="button" class="pay-btn" value="确认 "disabled="disabled">

    js:

    function moneyChange(e){     

                       var money=$(e).val();

                       $(".pay-btn").attr("disabled",false);

                       if(money==""){

                       $(".pay-btn").attr("disabled",true);       

                       }                                            

             }; 

    以后再遇到需要实时监听文本框输入情况的,就可以用oninput事件了,例如文本区还能输入的个数,把文本框的内容实时取出等等。

  • 相关阅读:
    [写代码]处理一组lrc歌词文件
    [ubuntu]windows重装以后,恢复grub引导
    [HDOJ1878]欧拉回路
    [写代码]解析自定义数据库文件的思路
    [写代码]wordList——百词斩CLI版
    [HDOJ2544]最短路
    [HDOJ1285] 确定比赛名次
    [HDOJ1232]畅通工程
    [HDOJ2717]Catch That Cow
    jQuery实现点击开关图片切换
  • 原文地址:https://www.cnblogs.com/xiaoxianweb/p/6387255.html
Copyright © 2011-2022 走看看