Rücktaste erkennen und bei Eingabe eingeben?

91

Wie geht das?

Ich habe es versucht:

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

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

aber es funktioniert nicht ...

Wenn ich beim Tastendruckereignis dasselbe mache, funktioniert es, aber ich möchte keinen Tastendruck verwenden, da das eingegebene Zeichen in meinem Eingabefeld ausgegeben wird. Ich muss das kontrollieren können


Mein Code:

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

In meiner Eingabe sollte kein Zeichen angehängt werden. Abgesehen davon, was ich mit val () hinzufüge, sollte die Eingabe des Benutzers vollständig ignoriert werden. Nur das Drücken der Taste ist für mich wichtig

Alex
quelle
3
Sie müssen das or'ing - Ereignis eigentlich nicht ausführen. Was in Ordnung ist, normalisiert jQuery das Ereignisobjekt für Sie. Siehe api.jquery.com/category/events/event-object
Niko
Sie sollten den Namen des Ereignisses als erstes Argument .bindangeben, nicht als Selektor. Sollte sein$('content').bind('keypress', ...
pmrotule

Antworten:

119

Verwenden Sie .onkeydowndas Entfernen mit und brechen Sie es ab return false;. So was:

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

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

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

Oder mit jQuery, weil Sie Ihrer Frage ein jQuery-Tag hinzugefügt haben:

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

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

Wenn Sie

Wouter J.
quelle
19
Was ist, wenn Sie Eingaben von einem Rechtsklick> Einfügen abfangen möchten?
CTB
5
keydownfunktioniert nicht in Chrome Android, es gibt Leere zurück, wenn Sie
Kosmetika
2
In der Funktion müssen wir das Ereignis als Parameter behalten, dann funktioniert nur es wie die Funktion (Ereignis) -------------------------- var input = document. getElementById ('myInput'); input.onkeydown = function (event) {var key = event.keyCode || event.charCode; if (key == 8 || key == 46) gibt false zurück; };
Anurag_BEHS
1
mit jQuery intern filtert enterund backspaceTasten auf inputEreignisse und diese Tastendrücken Sie es nicht erreichen
Vsync
@Wouter - Nicht, dass es eine große Sache ist, aber ich denke, der Code für jquery enthält einen Tippfehler. Ich denke, Sie wollten dem On-Keydown-Ereignishandler den Parameternamen "event" hinzufügen.
RoboBear
14

Mit jQuery

Die event.which Eigenschaft normalisieren event.keyCode und event.charCode. Es wird empfohlen, event.which für die Tastatureingabe zu beobachten.

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

jQuery('#input').on('keydown', function(e) {
    if( e.which == 8 || e.which == 46 ) return false;
});
SerzN1
quelle
2
Ich benutze jQuery schon lange, habe es aber nicht gesehen. Immer gut, etwas Neues zu lernen. +1!
Sablefoste
10

event.key === "Rücktaste"

Neuere und viel sauberere: verwenden event.key. Keine willkürlichen Nummerncodes mehr!

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

Mozilla Docs

Unterstützte Browser

Gibolt
quelle
Manchmal gibt event.key "Process" aus einem Grund zurück, den ich nicht verstehen kann ...
Oscar Chambers
3

Haben Sie versucht, 'onkeydown' zu verwenden? Dies ist die Veranstaltung, die Sie suchen.

Es funktioniert, bevor der Eingang eingefügt wird, und ermöglicht es Ihnen, die Zeicheneingabe abzubrechen.

iMoses
quelle
aber wie storniere ich es? weil ich val () für die Eingabe verwende und das eingegebene Zeichen immer noch angehängt wird
Alex
3
Wie wäre es mit event.preventDefault()?
Niko
Sie können return false;jedes Ereignis einfach abbrechen, wenn Sie jQuery verwenden.
iMoses
3

Es ist eine alte Frage, aber wenn Sie ein Backspace-Ereignis bei der Eingabe abfangen möchten und nicht Keydown, Tastendruck oder Keyup - da ich bemerkt habe, dass eine dieser Funktionen bestimmte Funktionen, die ich geschrieben habe, unterbricht und bei der automatisierten Textformatierung unangenehme Verzögerungen verursacht - Mit inputType können Sie eine Rücktaste abfangen:

document.getElementsByTagName('input')[0].addEventListener('input', function(e) {
    if (e.inputType == "deleteContentBackward") {
        // your code here
    }
});
Brandon McConnell
quelle
2
$('div[contenteditable]').keydown(function(e) {
// trap the return key being pressed
if (e.keyCode === 13 || e.keyCode === 8)
{
    return false;
}
});
Phanikumar Jatavallabhula
quelle
1
Schlüsselcode 8 für "BackSpace"
Phanikumar Jatavallabhula
Die Frage bezieht sich auf Rücktaste und Löschen, nicht auf Rücktaste und Eingabe.
Paul
2

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

Neuere und viel sauberere: verwenden event.key. Keine willkürlichen Nummerncodes mehr!

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

Moderner Stil:

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

Mozilla Docs

Unterstützte Browser

Gibolt
quelle
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
quelle
0

Auf Android-Geräten mit Chrome können wir keine Rücktaste erkennen. Sie können die Problemumgehung dafür verwenden:

var oldInput = '',
    newInput = '';

 $("#ID").keyup(function () {
  newInput = $('#ID').val();
   if(newInput.length < oldInput.length){
      //backspace pressed
   }
   oldInput = newInput;
 })
Aafaq Ahmad
quelle
Ich mag wirklich nicht dies die Antwort sein, aber es scheint zu sein, da sie gesetzt whichund keyCodeauf 229. Es muss ein besserer Weg, oder ein besserer Weg, bald kommen, aber ich werde jetzt im Grunde dieses verwenden. ..
JohnnyFun