ZIEL:

Wenn ein Benutzer ein Zeichen in ein Textfeld eingibt, wird eine Schaltfläche angezeigt. Wenn der Benutzer das Textfeld mit der Rücktaste löscht, diese Taste jedoch einige Sekunden lang gedrückt hält, wird die Schaltfläche sofort ausgeblendet.

AUSGABE:

Wenn ein Benutzer ein einzelnes Zeichen eingibt und es mit der Rücktaste entfernt, indem er die Rücktaste einige Sekunden lang gedrückt hält, tritt eine Verzögerung auf, bevor die Schaltfläche ausgeblendet wird. Dies geschieht nur, wenn der Benutzer nur ein Zeichen eingegeben und dann die Rücktaste gedrückt gehalten hat, ohne loszulassen. Wenn der Benutzer stattdessen mehrere Zeichen eingab und dann die Rücktaste gedrückt hielt, bis das Textfeld leer war, gab es keine Verzögerung beim Ausblenden der Schaltfläche.

<input type="text" id="tbox"></text>
<button type="button" id="btn"  style="display:none;">push me</button>

$('#tbox').on('keydown keypress keyup',function(){
    if($('#tbox').val() !== '') {
        $('#btn').css({'display':'block'});
    } else {
        $('#btn').css({'display':'none'});
    }
});

JSFIDDLE:

http://jsfiddle.net/odkut0dh/

6
brooklynsweb 6 Aug. 2015 im 06:59

4 Antworten

Beste Antwort

Ein kleiner Überblick über die Situation:

Angenommen, der Wert <input> ist "x" und Sie geben die Rücktaste ein:
- Wenn das Ereignis keydown ausgelöst wird, ist der Wert der Eingabe immer noch "x".
- Wenn das keypress ausgelöst wird, ist es immer noch "x".
Wenn Sie den Schlüssel nicht loslassen:
__ keydown wird nach einiger Verzögerung erneut ausgelöst. hängt davon ab, ob der -Wert jetzt "" ist.
__ keypress wird erneut ausgelöst, der Wert ist immer noch "".
__ Wenn Sie den Schlüssel loslassen, wird keyup ausgelöst. Der Wert ist "".
Wenn Sie den Schlüssel loslassen:
__ keypress wird direkt ausgelöst, der Wert ist "".

Die Lösung für IE10 + besteht darin, input zu verwenden Ereignis, das ausgelöst wird, wenn sich der Inhalt des textEditable-Elements geändert hat, oder, wie von @Mayhem vorgeschlagen, das change Ereignis, das nicht einmal auf Schlüsseleingaben wartet und eine bessere Browserunterstützung als input bietet.

$('#tbox').on('input change',function(e){
    if($('#tbox').val() !== '') {
        $('#btn').css({'display':'block'});
    } else {
        $('#btn').css({'display':'none'});
    }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="tbox"></text>
<button type="button" id="btn"  style="display:none;">push me</button>
4
Kaiido 6 Aug. 2015 im 04:35

Sie können das Wiederholen von Keydown verhindern, indem Sie es beim Hochfahren durch eine globale Variable steuern:

var allow = true;
$(document).on('keydown', function(e) { 
  if (e.repeat != undefined) {
    allow = !e.repeat;
  }
  if (!allowed) return;
  allowed = false;

  if($('#tbox').val() !== '') {
        $('#btn').css({'display':'block'});
    } else {
        $('#btn').css({'display':'none'});
    }
});

$(document).keyup(function(e) { 
  allowed = true;
});
0
Siamak Ferdos 6 Aug. 2015 im 04:18

Das Problem ist, dass $ ('# tbox'). Val (); ist nicht leer (''), wenn die Rücktaste gedrückt wird. Sie müssen also die Wertprüfung verzögern.

Wenn Sie die Taste drücken, wird als Erstes das Keydown-Ereignis ausgelöst. Anschließend wird die Tastenaktion für das Eingabefeld ausgeführt.

$('#tbox').on('keydown keypress keyup',function(){
    setTimeout(function () {
          if($('#tbox').val() !== '') {
        $('#btn').css({'display':'block'});
    } else {
        $('#btn').css({'display':'none'});
    }  
},0);

});
1
basis 6 Aug. 2015 im 04:20

Da ich bereits Kommentare zu diesem Thema abgegeben habe, habe ich schnell googelt und bin auf diesen Beitrag gestoßen, der es möglicherweise etwas einfacher macht. Ermitteln Sie alle Änderungen an einem (sofort) mit JQuery

Also habe ich es hier in eine Geige gesteckt, damit Sie es testen können: Slight Modded Version

Das HTML

<input type="text" value="Some Value" id="text1" />
<button id="btn1">Click Me</button>

Die JS

 $('#text1').each(function() {
   var elem = $(this);
   elem.data('oldVal', elem.val());
   elem.bind("propertychange change click keyup input paste", function(event){
      if (elem.data('oldVal') != elem.val()) {
          if (elem.val().length == 0 ) {
              $("#btn1").hide();
          } else {
              $("#btn1").show();
          }
       elem.data('oldVal', elem.val());
     }
   });
 });

Da ich nicht zu viel Zeit habe, um diesen Code in Abschnitte zu unterteilen ... Wie es aussieht ... Sie brauchen die elem.data nicht ... Nur das Bindeereignis ... ... ah, ich habe mich entschieden zu verkürzen der Code für Sie ...

http://jsfiddle.net/z2ew3fqz/3/ Mit dem gleichen HTML ...

Kürzeste Version, die ich aus dem oben angegebenen Beispiel machen könnte

Das HTML

<input type="text" value="Some Value" id="text1" />
<button id="btn1">Click Me</button>

Die JS

 $('#text1').bind("propertychange change click keyup input paste", function(event){
     if ($(this).val().length == 0 ) {
         $("#btn1").hide();
     } else {
         $("#btn1").show();
     }
 });

Ich habe dies schnell auf Chrom getestet. Maus- / Funktionstasten scheinen es alle richtig zu beeinflussen. Andere Browser überlasse ich dem OP zum Testen. Lassen Sie mich wissen, wenn Probleme in einem bestimmten Browser auftreten.

IE10 scheint die Mindestunterstützung dafür zu sein. IE9 kann möglicherweise einen js-Prototyp erstellen lassen. Aber wie wichtig ist dies für die Unterstützung in Ihrem Projekt? IE <10 unterstützen?

2
Community 23 Mai 2017 im 10:26