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


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

​


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

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


À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.


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

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


2
$('div[contenteditable]').keydown(function(e) {
// trap the return key being pressed
if (e.keyCode === 13 || e.keyCode === 8)
{
    return false;
}
});

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 += "-"
    } 
}

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

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
Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.