Обнаружить backspace и del на "входное" событие?
Как это сделать?
Я старался:
var key = event.which || event.keyCode || event.charCode;
if(key == 8) alert('backspace');
но это не работает...
Если я делаю то же самое для события нажатия клавиши, это работает, но я не хочу использовать нажатие клавиши, потому что оно выводит напечатанный символ в моем поле ввода. Я должен быть в состоянии контролировать это
мой код:
$('#content').bind('input', function(event){
var text = $(this).val(),
key = event.which || event.keyCode || event.charCode;
if(key == 8){
// here I want to ignore backspace and del
}
// here I'm doing my stuff
var new_text = 'bla bla'+text;
$(this).val(new_text);
});
ни один символ не должен быть добавлен в мой ввод, кроме того, что я добавляю с помощью val(), фактически ввод от пользователя должен быть полностью проигнорирован, для меня важно только действие нажатия клавиши
11 ответов
Использование .onkeydown
и отмените удаление с помощью return false;
, Как это:
var input = document.getElementById('myInput');
input.onkeydown = function() {
var key = event.keyCode || event.charCode;
if( key == 8 || key == 46 )
return false;
};
Или с jQuery, потому что вы добавили тег jQuery в свой вопрос:
jQuery(function($) {
var input = $('#myInput');
input.on('keydown', function() {
var key = event.keyCode || event.charCode;
if( key == 8 || key == 46 )
return false;
});
});
event.key === "Backspace"
Более новый и намного чище: используйте event.key
, Нет больше произвольных числовых кодов!
input.addEventListener('keydown', function(event) {
const key = event.key; // const {key} = event; ES6+
if (key === "Backspace" || key === "Delete") {
return false;
}
});
С помощью jQuery
Свойство event.which нормализует event.keyCode и event.charCode. Рекомендуется следить за событием, которое для ввода с клавиатуры.
http://api.jquery.com/event.which/
jQuery('#input').on('keydown', function(e) {
if( e.which == 8 || e.which == 46 ) return false;
});
Это старый вопрос, но если вы хотите перехватить событие возврата при вводе, а не нажатие клавиши, нажатие клавиши или нажатие клавиши - как я заметил, любая из этих функций нарушает определенные функции, которые я написал, и вызывает неуклюжие задержки с автоматическим форматированием текста - вы можете поймать возврат, используя inputType:
document.getElementsByTagName('input')[0].addEventListener('input', function(e) {
if (e.inputType == "deleteContentBackward") {
// your code here
}
});
keydown
с event.key === "Backspace" or "Delete"
Более новый и намного чище: используйте event.key
, Нет больше произвольных числовых кодов!
input.addEventListener('keydown', function(event) {
const key = event.key; // const {key} = event; ES6+
if (key === "Backspace" || key === "Delete") {
return false;
}
});
Вы пытались использовать "onkeydown"? Это событие, которое вы ищете.
Он работает до того, как ввод будет вставлен, и позволяет отменить ввод символа.
На устройствах Android, использующих Chrome, мы не можем обнаружить возврат. Вы можете использовать обходной путь для этого:
var oldInput = '',
newInput = '';
$("#ID").keyup(function () {
newInput = $('#ID').val();
if(newInput.length < oldInput.length){
//backspace pressed
}
oldInput = newInput;
})
InputEvent.inputType
может использоваться для обнаружения Backspace Mozilla Docs. Он работает на рабочем столе Chrome, Chrome Android и Safari iOS.
<input type="text" id="test" />
<script>
document.getElementById("test").addEventListener('input', (event) => {
console.log(event.inputType);
// Typing of any character event.inputType = 'insertText'
// Backspace button event.inputType = 'deleteContentBackward'
// Delete button event.inputType = 'deleteContentForward'
})
</script>
$('div[contenteditable]').keydown(function(e) {
// trap the return key being pressed
if (e.keyCode === 13 || e.keyCode === 8)
{
return false;
}
});
//Here's one example, not sure what your application is but here is a relevant and likely application
function addDashesOnKeyUp()
{
var tb = document.getElementById("tb1");
var key = event.which || event.keyCode || event.charCode;
if((tb.value.length ==3 || tb.value.length ==7 )&& (key !=8) )
{
tb.value += "-"
}
}
Javascript
<br>
<input id="input">
<br>
or
<br>
jquery
<br>
<input id="inpu">
<script type="text/javascript">
var myinput = document.getElementById('input');
input.onkeydown = function() {
if (event.keyCode == 8) {
alert('you pressed backspace');
//event.preventDefault(); remove // to prevent backspace
}
if (event.keyCode == 46) {
alert('you pressed delete');
//event.preventDefault(); remove // to prevent delete
}
};
//jquery code
$('#inpu').on('keydown', function(e) {
if (event.which == 8) {
alert('you pressed backspace');
//event.preventDefault(); remove // to prevent backspace
}
if (event.which == 46) {
alert('you pressed delete');
//event.preventDefault(); remove // to prevent delete
}
});
</script>