Czy wykryć cofnięcie i usunięcie zdarzenia „input”?


95

Jak to zrobić?

Próbowałem:

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

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

ale to nie działa ...

Jeśli zrobię to samo w przypadku naciśnięcia klawisza, zadziała, ale nie chcę używać klawisza, ponieważ wyświetla wpisany znak w moim polu wejściowym. Muszę być w stanie to kontrolować


mój kod:

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

żaden znak nie powinien być dodawany do mojego wpisu, poza tym, co dodam za pomocą val () w rzeczywistości wejście od użytkownika powinno być całkowicie ignorowane, tylko naciśnięcie klawisza jest dla mnie ważne


3
Właściwie nie musisz wykonywać zdarzenia or'ing -. Co jest w porządku, jQuery normalizuje obiekt zdarzenia za Ciebie. Zobacz api.jquery.com/category/events/event-object
Niko

Powinieneś umieścić nazwę zdarzenia jako pierwszy argument .bind, a nie selektor. Powinien być$('content').bind('keypress', ...
pmrotule

Odpowiedzi:


123

Użyj .onkeydowni anuluj usuwanie za pomocą return false;. Lubię to:

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

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

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

Lub z jQuery, ponieważ dodałeś tag jQuery do swojego pytania:

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

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

Wcześniejsze


19
Co by było, gdybyś chciał złapać dane wejściowe po kliknięciu prawym przyciskiem myszy> wklej?
ctb

6
keydownnie działa w Chrome na Androida, zwraca pustkę po kliknięciu backspace lub del
Kosmetika

2
W funkcji musimy zachować zdarzenie jako parametr, wtedy tylko będzie działać jak funkcja (zdarzenie) -------------------------- zmienne wejście = dokument. getElementById ('myInput'); input.onkeydown = function (event) {var key = event.keyCode || event.charCode; if (klucz == 8 || klucz == 46) return false; };
Anurag_BEHS

1
z jQuery wewnętrznie filtruje enteri backspaceklawisze na inputzdarzeniach, a te naciśnięcia klawiszy do tego nie docierają
vsync

@Wouter - To nie jest wielka sprawa, ale myślę, że w kodzie jquery jest literówka. Myślę, że miałeś na myśli dodanie nazwy parametru „zdarzenie” do programu obsługi zdarzeń on-keydown.
RoboBear,

14

Dzięki jQuery

Właściwość event.which normalizuje event.keyCode i event.charCode. Zaleca się obserwowanie zdarzenia, które jest przeznaczone do wprowadzania danych za pomocą klawiatury.

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

jQuery('#input').on('keydown', function(e) {
    if( e.which == 8 || e.which == 46 ) return false;
});

2
Używam jQuery od dawna, ale tego nie widziałem. Zawsze dobrze jest nauczyć się czegoś nowego. +1!
Sablefoste

10

event.key === "Backspace"

Nowsze i znacznie czystsze: użyj event.key. Nigdy więcej dowolnych kodów liczbowych!

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

Dokumenty Mozilli

Obsługiwane przeglądarki


Czasami event.key zwraca „Process” z powodu, którego nie rozumiem ...
Oscar Chambers

To jest obsługiwana przeglądarka. Możesz mieć błąd, a może twoja niestandardowa klawiatura nie uruchamia zdarzeń związanych z keydown
Gibolt

3

Czy próbowałeś użyć „onkeydown”? To jest wydarzenie, którego szukasz.

Działa przed wstawieniem wejścia i umożliwia anulowanie wprowadzania znaków.


ale jak to anulować? ponieważ używam val () na wejściu i nadal dołącza wpisany znak
Alex

3
A co powiesz event.preventDefault()?
Niko,

Możesz po prostu return false;anulować dowolne zdarzenie podczas korzystania z jQuery.
iMoses

3

To stare pytanie, ale jeśli chcesz przechwycić zdarzenie backspace przy wejściu, a nie keydown, keypress lub keyup - jak zauważyłem, każda z tych funkcji przerywa niektóre napisane przeze mnie funkcje i powoduje niewygodne opóźnienia dzięki automatycznemu formatowaniu tekstu —Możesz złapać backspace za pomocą inputType:

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

3

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

Nowsze i znacznie czystsze: użyj event.key. Nigdy więcej dowolnych kodów liczbowych!

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

Nowoczesny styl:

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

Dokumenty Mozilli

Obsługiwane przeglądarki


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

1
Kod klucza 8 dla „
BackSpace

Pytanie dotyczy cofnięcia i usunięcia, a nie cofnięcia i wejścia.
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

na urządzeniach z Androidem korzystających z przeglądarki Chrome nie możemy wykryć cofnięcia. Możesz zastosować obejście tego problemu:

var oldInput = '',
    newInput = '';

 $("#ID").keyup(function () {
  newInput = $('#ID').val();
   if(newInput.length < oldInput.length){
      //backspace pressed
   }
   oldInput = newInput;
 })

Naprawdę nie chcę, aby to była odpowiedź, ale wydaje się, że tak jest, ponieważ ustawili whichi keyCodena 229. Musi być lepszy sposób lub lepszy sposób wkrótce, ale będę używał w zasadzie tego teraz. ..
JohnnyFun
Korzystając z naszej strony potwierdzasz, że przeczytałeś(-aś) i rozumiesz nasze zasady używania plików cookie i zasady ochrony prywatności.
Licensed under cc by-sa 3.0 with attribution required.