• input标签event兼容性总结


    解决移动端input标签输入小数时村在问题,

    这里总结一下input标签的所有input事件的移动端兼容性问题

    <div class="wrapper">
       <p>keypress - event not call on adroid</p>
       <input type="text" class="input1">
       <span class="code"></span>   
    </div>
    
    <div class="wrapper">
       <p>keydown</p>
       <input type="text" class="input2">
       <span class="code"></span>
    </div>
    
    <div class="wrapper">
       <p>keyup</p>
       <input type="text" class="input3">
       <span class="code"></span>   
    </div>
    
    <div class="wrapper">
       <p>textInput event - no FF or Opera support</p>
       <input type="text" id="input4">
       <span class="code"></span>   
    </div>
    
    <div class="wrapper">
       <p>on input - runs on blur</p>
       <input type="text" class="input5">
       <span class="code"></span>   
    </div>
    
    <div class="wrapper">
       <p>test</p>
       <input type="text" id="input6">
       <span class="code"></span>   
    </div>
    
    <div class="wrapper">
       <p>input number no js</p>
       <input type="number" class="">
       <span class="code"></span>   
    </div>
    

      

    $('.input1').keypress(function(e) {
       var wrapper = $(this).closest('.wrapper');
       var htmlTarget = wrapper.find('.code');
       // $(htmlTarget).html(e.which); 
        // if (e.which == 8) { // 8 is backspace
          console.log(e);
          var html = "key: " + e.key +", code: " + e.keyCode;
          $(htmlTarget).html(html);
            // e.preventDefault();
        // }
    });
    
    $('.input2').keydown(function(e) {
       var wrapper = $(this).closest('.wrapper');
       var htmlTarget = wrapper.find('.code');
        // if (e.which == 8) { // 8 is backspace
          console.log(e);
          var html = "key: " + e.key +", code: " + e.keyCode;
          $(htmlTarget).html(html);
            // e.preventDefault();
        // }
    });
    
    $('.input3').keyup(function(e) {
       var wrapper = $(this).closest('.wrapper');
       var htmlTarget = wrapper.find('.code');
       console.log(e);
       var html = "key: " + e.key +", code: " + e.keyCode;
       $(htmlTarget).html(html);
    });
    
    var input_field = document.getElementById('input4');
     input_field.addEventListener('textInput', function(e) {
       var wrapper = $(this).closest('.wrapper');
       var htmlTarget = wrapper.find('.code');
        // e.data will be the 1:1 input you done
        var char = e.data; // In our example = "a"
        console.log(e);
        // If you want the keyCode..
        var keyCode = char.charCodeAt(0); // a = 97
        var html = "key: " + char +", code: " + keyCode;
        $(htmlTarget).html(html);
        // Stop processing if "a" is pressed
        if (keyCode == 97) {
            e.preventDefault();
            return false;
        }
        return true;
    });
    
    $('.input5').on('change', function(e) {
        console.log(e);
       var wrapper = $(this).closest('.wrapper');
       var htmlTarget = wrapper.find('.code');
       console.log(e);
       var html = "key: " + e.key +", code: " + e.keyCode;
       $(htmlTarget).html(html);
    });
    
    // $('#input6').on('change', function(e) {
    //     console.log(e);
    //    var wrapper = $(this).closest('.wrapper');
    //    var htmlTarget = wrapper.find('.code');
    //    console.log(e);
    //    var html = "key: " + e.key +", code: " + e.keyCode;
    //    $(htmlTarget).html(html);
    // });
    
    var input = document.getElementById('input6');
    var oldValue;
    var keydownHandler = function(e) {
       oldValue = e.target.value;
        console.log(oldValue);
     }
     var inputHandler = function(e) {
       var el = e.target,
           newValue = el.value;
          console.log(newValue);
       ;
     }
    
    input.addEventListener('keydown', keydownHandler);
    input.addEventListener('input', inputHandler);
  • 相关阅读:
    对象属性操作-包含kvc---ios
    UserDefault的使用,保存小数据到本地-iOS
    单例模式-ios
    值类型和引用类型
    [fn]焦点图JQ插件版
    [f]区间随机数函数
    css3动画特效集合
    js中的事件代理(委托)
    Nodejs入门【转载】保留备用
    canvas打字效果
  • 原文地址:https://www.cnblogs.com/mingweiyard/p/11915012.html
走看看 - 开发者的网上家园