¿Detectar retroceso y eliminar el evento de "entrada"?

93

¿Como hacer eso?

Lo intenté:

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

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

pero no funciona ...

Si hago lo mismo en el evento de pulsación de tecla, funciona, pero no quiero usar la pulsación de tecla porque genera el carácter escrito en mi campo de entrada. Necesito poder controlar eso


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

no se debe agregar ningún carácter en mi entrada, además de lo que estoy agregando con val () en realidad, la entrada del usuario debe ignorarse por completo, solo la acción de presionar la tecla es importante para mí

Alex
fuente
3
En realidad, no necesita hacer or'ing - event. Lo cual está bien, jQuery normaliza el objeto de evento por usted. Ver api.jquery.com/category/events/event-object
Niko
Se supone que debes poner el nombre del evento como primer argumento .bind, no como selector. Debería ser$('content').bind('keypress', ...
pmrotule

Respuestas:

119

Utilice .onkeydowny cancele la eliminación con return false;. Me gusta esto:

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

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

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

O con jQuery, porque agregó una etiqueta jQuery a su pregunta:

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

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

Wouter J
fuente
19
¿Qué pasa si desea capturar la entrada de un clic derecho> pegar?
ctb
6
keydownno funciona en Chrome Android, devuelve vacío al hacer clic en retroceso o del
Kosmetika
2
En función tenemos que mantener el evento como parámetro, entonces solo funcionará como función (evento) -------------------------- var input = document. getElementById ('myInput'); input.onkeydown = función (evento) {var key = event.keyCode || event.charCode; if (clave == 8 || clave == 46) devuelve falso; };
Anurag_BEHS
1
con jQuery filtra internamente entery backspaceclaves en inputeventos, y estas pulsaciones de teclas no lo alcanzan
vsync
@Wouter: no es gran cosa, pero creo que hay un error tipográfico en el código de jquery. Creo que pretendía agregar el nombre del parámetro "evento" al controlador de eventos on-keydown.
RoboBear
14

Con jQuery

La propiedad event.which normaliza event.keyCode y event.charCode. Se recomienda ver event.which para la entrada de teclas del teclado.

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

jQuery('#input').on('keydown', function(e) {
    if( e.which == 8 || e.which == 46 ) return false;
});
SerzN1
fuente
2
He estado usando jQuery durante mucho tiempo, pero no he visto esto. Siempre es bueno aprender algo nuevo. +1!
Sablefoste
9

event.key === "Retroceso"

Más reciente y mucho más limpio: uso event.key. ¡No más códigos numéricos arbitrarios!

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

Documentos de Mozilla

Navegadores compatibles

Gibolt
fuente
A veces event.key devuelve "Proceso" por una razón que no puedo entender ...
Oscar Chambers
Ese es un navegador compatible. Es posible que tenga un error, o tal vez su teclado personalizado no activa eventos de
pulsación de tecla
3

¿Ha intentado usar 'onkeydown'? Este es el evento que busca.

Opera antes de que se inserte la entrada y le permite cancelar la entrada de caracteres.

iMoses
fuente
pero ¿cómo lo cancelo? porque estoy usando val () en la entrada y todavía agrega el carácter escrito
Alex
3
¿Qué tal event.preventDefault()?
Niko
Simplemente puede return false;cancelar cualquier evento cuando use jQuery.
iMoses
3

Es una vieja pregunta, pero si desea capturar un evento de retroceso en la entrada, y no presionar una tecla, presionar una tecla o presionar una tecla, ya que he notado que cualquiera de estas funciones rompe ciertas funciones que he escrito y causa retrasos incómodos con el formato de texto automatizado —Puedes atrapar un retroceso usando inputType:

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

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

Más reciente y mucho más limpio: uso event.key. ¡No más códigos numéricos arbitrarios!

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

Documentos de Mozilla

Navegadores compatibles

Gibolt
fuente
2
$('div[contenteditable]').keydown(function(e) {
// trap the return key being pressed
if (e.keyCode === 13 || e.keyCode === 8)
{
    return false;
}
});
Phanikumar Jatavallabhula
fuente
1
Código clave 8 para "BackSpace"
Phanikumar Jatavallabhula
La pregunta es sobre retroceder y eliminar, no retroceder y entrar.
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 += "-"
    } 
}
user2125311
fuente
0

en dispositivos Android que usan Chrome, no podemos detectar un retroceso. Puede utilizar una solución alternativa para ello:

var oldInput = '',
    newInput = '';

 $("#ID").keyup(function () {
  newInput = $('#ID').val();
   if(newInput.length < oldInput.length){
      //backspace pressed
   }
   oldInput = newInput;
 })
Aafaq Ahmad
fuente
Realmente no quiero que esta sea la respuesta, pero parece que lo es, ya que establecieron whichy keyCodeen 229. Debe haber una manera mejor, o una manera mejor próximamente, pero usaré básicamente esto por ahora. ..
JohnnyFun