Обнаружить backspace и del в событии «input»?

95

Как это сделать?

Я старался:

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 (), на самом деле ввод от пользователя следует полностью игнорировать, для меня важно только действие нажатия клавиши

Alex
источник
3
На самом деле вам не нужно выполнять or'ing - event. Что нормально, jQuery нормализует объект события для вас. См. Api.jquery.com/category/events/event-object
Нико,
Вы должны указать имя события в качестве первого аргумента .bind, а не селектора. Должно быть$('content').bind('keypress', ...
pmrotule

Ответы:

123

Используйте .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;
  });
});

Взаимодействие с другими людьми

Воутер Дж
источник
19
Что, если вы хотите поймать ввод от щелчка правой кнопкой мыши> вставки?
ctb 03
6
keydownне работает в Chrome Android, возвращает пустоту при нажатии на backspace или del
Косметика
2
В функции мы должны сохранить событие как параметр, тогда только оно будет работать как функция (событие) -------------------------- var input = document. getElementById ('myInput'); input.onkeydown = function (событие) {var key = event.keyCode || event.charCode; if (key == 8 || key == 46) return false; };
Anurag_BEHS
1
с jQuery он выполняет внутреннюю фильтрацию enterи backspaceключи по inputсобытиям, и эти нажатия клавиш не достигают его
vsync
@Wouter - Не то чтобы это большое дело, но я думаю, что в коде jquery есть опечатка. Я думаю, вы хотели добавить имя параметра «событие» в обработчик событий при нажатии клавиши.
RoboBear 07
14

С jQuery

Свойство event.which нормализует event.keyCode и event.charCode. Рекомендуется смотреть event.which для ввода с клавиатуры.

http://api.jquery.com/event.which/

jQuery('#input').on('keydown', function(e) {
    if( e.which == 8 || e.which == 46 ) return false;
});
SerzN1
источник
2
Я давно использую jQuery, но такого не видел. Всегда приятно узнать что-то новое. +1!
Sablefoste, 04
10

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

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

Гибольт
источник
Иногда event.key возвращает «Процесс» по непонятной причине ...
Оскар Чемберс,
Это поддерживаемый браузер. У вас может быть ошибка, или, возможно, ваша настраиваемая клавиатура не
запускает
3

Вы пробовали использовать onkeydown? Это то событие, которое вы ищете.

Он работает до того, как ввод будет вставлен, и позволяет отменить ввод символов.

iMoses
источник
но как мне отменить это? потому что я использую val () на входе, а он по-прежнему добавляет набранный символ
Alex
3
Как насчет event.preventDefault()?
Нико
Вы можете просто return false;отменить любое событие при использовании jQuery.
iMoses
3

Это старый вопрос, но если вы хотите поймать событие backspace при вводе, а не keydown, keypress или keyup - поскольку я заметил, что любая из этих функций нарушает определенные функции, которые я написал, и вызывает неудобные задержки с автоматическим форматированием текста —Вы можете поймать пробел с помощью inputType:

document.getElementsByTagName('input')[0].addEventListener('input', function(e) {
    if (e.inputType == "deleteContentBackward") {
        // your code here
    }
});
Брэндон МакКоннелл
источник
3

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

Современный стиль:

input.addEventListener('keydown', ({key}) => {
    if (["Backspace", "Delete"].includes(key)) {
        return false
    }
})

Документы Mozilla

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

Гибольт
источник
2
$('div[contenteditable]').keydown(function(e) {
// trap the return key being pressed
if (e.keyCode === 13 || e.keyCode === 8)
{
    return false;
}
});
Пханикумар Джатаваллабхула
источник
1
Код клавиши 8 для "BackSpace"
Фаникумар Джатаваллабхула
Речь идет о возврате и удалении, а не о возврате и вводе.
Пол
0
//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 += "-"
    } 
}
user2125311
источник
0

на устройствах Android, использующих Chrome, мы не можем обнаружить обратное пространство. Вы можете использовать обходной путь:

var oldInput = '',
    newInput = '';

 $("#ID").keyup(function () {
  newInput = $('#ID').val();
   if(newInput.length < oldInput.length){
      //backspace pressed
   }
   oldInput = newInput;
 })
Аафак Ахмад
источник
Я действительно не хочу, чтобы это был ответ, но, похоже, так оно whichи есть, поскольку они устанавливают и keyCodeравны 229. Должен быть лучший способ или лучший способ в ближайшее время, но я буду использовать в основном это сейчас. ..
JohnnyFun