input event兼容性

Posted 2020-11-22 mingweiyard

<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>


<p>
   <a href="http://jsfiddle.net/SpYk3/NePCm/">useful detection for events</a>
</p>

　　

$(‘.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);