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

Alex
źródło
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

Wouter J.
źródło
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;
});
SerzN1
źródło
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

Gibolt
źródło
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.

iMoses
źródło
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
    }
});
Brandon McConnell
źródło
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

Gibolt
źródło
2
$('div[contenteditable]').keydown(function(e) {
// trap the return key being pressed
if (e.keyCode === 13 || e.keyCode === 8)
{
    return false;
}
});
Phanikumar Jatavallabhula
źródło
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 += "-"
    } 
}
user2125311
źródło
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;
 })
Aafaq Ahmad
źródło
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