Обнаружить 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;
    }
});

Mozilla Docs

Поддерживаемые браузеры

С помощью 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;
    }
});

Mozilla Docs

Поддерживаемые браузеры

Вы пытались использовать "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 += "-"
    } 
}

Live demo

      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>
Другие вопросы по тегам