Detectar backspace e deletar evento de “entrada”?

93

Como fazer isso?

Eu tentei:

var key = event.which || event.keyCode || event.charCode;

if(key == 8) alert('backspace');

mas não funciona ...

Se eu fizer o mesmo no evento de pressionamento de tecla, ele funcionará, mas não quero usar o pressionamento de tecla porque ele produz o caractere digitado no meu campo de entrada. Eu preciso ser capaz de controlar isso


meu código:

  $('#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);
  });

nenhum caractere deve ser anexado à minha entrada, além do que estou adicionando com val (), na verdade, a entrada do usuário deve ser completamente ignorada, apenas a ação de pressionar a tecla é importante para mim

Alex
fonte
3
Na verdade, você não precisa fazer o or'ing - event. O que está bem, o jQuery normaliza o objeto de evento para você. Consulte api.jquery.com/category/events/event-object
Niko
Você deve colocar o nome do evento como o primeiro argumento de .bind, não um seletor. Deve ser$('content').bind('keypress', ...
pmrotule

Respostas:

119

Use .onkeydowne cancele a remoção com return false;. Como isso:

var input = document.getElementById('myInput');

input.onkeydown = function() {
    var key = event.keyCode || event.charCode;

    if( key == 8 || key == 46 )
        return false;
};

Ou com jQuery, porque você adicionou uma tag jQuery à sua pergunta:

jQuery(function($) {
  var input = $('#myInput');
  input.on('keydown', function() {
    var key = event.keyCode || event.charCode;

    if( key == 8 || key == 46 )
        return false;
  });
});

Wouter J
fonte
19
E se você quisesse obter a entrada de um clique com o botão direito> colar?
ctb
6
keydownnão funciona no Chrome Android, ele retorna o vazio ao clicar em backspace ou del
Kosmetika
2
Em função, temos que manter o evento como parâmetro, então ele funcionará como função (evento) -------------------------- var input = document. getElementById ('myInput'); input.onkeydown = function (event) {var key = event.keyCode || event.charCode; if (chave == 8 || chave == 46) retorna falso; };
Anurag_BEHS de
1
com jQuery, ele filtra internamente entere backspacedigita inputeventos, e esses pressionamentos de tecla não chegam a ele
vsync
@Wouter - Não que seja um grande negócio, mas acho que há um erro de digitação no código para jquery. Acho que você pretendia adicionar o nome do parâmetro "evento" ao manipulador de eventos no keydown.
RoboBear
14

Com jQuery

A propriedade event.which normaliza event.keyCode e event.charCode. Recomenda-se assistir event.which para entrada de tecla do teclado.

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

jQuery('#input').on('keydown', function(e) {
    if( e.which == 8 || e.which == 46 ) return false;
});
SerzN1
fonte
2
Eu uso jQuery há muito tempo, mas não vi isso. É sempre bom aprender algo novo. +1!
Sablefoste
9

event.key === "Backspace"

Mais recente e muito mais limpo: use event.key. Não há mais códigos numéricos arbitrários!

input.addEventListener('keydown', function(event) {
    const key = event.key; // const {key} = event; ES6+
    if (key === "Backspace" || key === "Delete") {
        return false;
    }
});

Mozilla Docs

Navegadores Suportados

Gibolt
fonte
Às vezes, event.key retorna "Processo" por um motivo que não consigo entender ...
Oscar Chambers
Esse é um navegador compatível. Você pode ter um bug ou talvez seu teclado personalizado não dispare eventos keydown
Gibolt
3

Você já tentou usar 'onkeydown'? Este é o evento que você procura.

Ele opera antes que a entrada seja inserida e permite cancelar a entrada de char.

iMoses
fonte
mas como faço para cancelar? porque estou usando val () na entrada e ele ainda acrescenta o caractere digitado
Alex
3
Que tal event.preventDefault()?
Niko
Você pode simplesmente return false;cancelar qualquer evento ao usar jQuery.
iMoses
3

É uma pergunta antiga, mas se você quiser capturar um evento de retrocesso na entrada, e não keydown, keypress ou keyup - como eu percebi que qualquer um desses quebra certas funções que escrevi e causa atrasos estranhos com formatação de texto automatizada - você pode pegar um backspace usando inputType:

document.getElementsByTagName('input')[0].addEventListener('input', function(e) {
    if (e.inputType == "deleteContentBackward") {
        // your code here
    }
});
Brandon McConnell
fonte
3

keydown com event.key === "Backspace" or "Delete"

Mais recente e muito mais limpo: use event.key. Não há mais códigos numéricos arbitrários!

input.addEventListener('keydown', function(event) {
    const key = event.key; // const {key} = event; ES6+
    if (key === "Backspace" || key === "Delete") {
        return false;
    }
});

Estilo moderno:

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

Mozilla Docs

Navegadores Suportados

Gibolt
fonte
2
$('div[contenteditable]').keydown(function(e) {
// trap the return key being pressed
if (e.keyCode === 13 || e.keyCode === 8)
{
    return false;
}
});
Phanikumar Jatavallabhula
fonte
1
Código-chave 8 para "BackSpace"
Phanikumar Jatavallabhula
A questão é sobre backspace e delete, não backspace e enter.
Paul
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 += "-"
    } 
}
usuário2125311
fonte
0

em dispositivos Android que usam o Chrome, não podemos detectar um backspace. Você pode usar uma solução alternativa para isso:

var oldInput = '',
    newInput = '';

 $("#ID").keyup(function () {
  newInput = $('#ID').val();
   if(newInput.length < oldInput.length){
      //backspace pressed
   }
   oldInput = newInput;
 })
Aafaq Ahmad
fonte
Eu realmente não quero que essa seja a resposta, mas parece que é, já que eles definiram whiche keyCodepara 229. Deve haver uma maneira melhor, ou uma maneira melhor em breve, mas estarei usando basicamente isso por enquanto. ..
JohnnyFun