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