javascript zmiana wydarzenie na pożary element wejściowy na tylko utraty ostrości

Question

Mam element wejściowy i chcę zaglądać długość treści i gdy długość staje się równa określonej wielkości, chcę, aby włączyć przycisk Prześlij, ale Mam do czynienia z problemem z zdarzeniem onchange javascript, ponieważ zdarzenie jest wywoływane tylko wtedy, gdy element wejściowy wykracza poza zakres, a nie kiedy zmienia się zawartość.

<input type="text" id="name" onchange="checkLength(this.value)" />

---- onchange nie ognia na zmianę zawartości nazwy, ale tylko pożary, gdy nazwa idzie nieostry.

Czy jest coś, co mogę zrobić, aby wydarzenie to działało na zmianę treści? lub inne wydarzenie, które mogę wykorzystać do tego? Znalazłem obejście, używając funkcji onkeyup, ale to nie uruchamia się po wybraniu niektórych treści z automatycznego uzupełniania przeglądarki.

Chcę czegoś, co może zadziałać, gdy zawartość pola zmieni się, czy to za pomocą klawiatury czy myszy ... jakichkolwiek pomysłów?

Answer 1

(function() { 
    var oldVal; 

    $('#name').on('change textInput input', function() { 
     var val = this.value; 
     if (val !== oldVal) { 
      oldVal = val; 
      checkLength(val); 
     } 
    }); 
}()); 

to złapie change, klawiszy, paste, textInput, input (jeśli jest dostępny). I nie strzelaj więcej niż to konieczne.

http://jsfiddle.net/katspaugh/xqeDj/

---

Odniesienia:

textInput - W3C DOM poziom 3 typ zdarzenia. http://www.w3.org/TR/DOM-Level-3-Events/#events-textevents

Środek użytkownik musi wysyła to zdarzenie, gdy jeden lub więcej znaków zostały został wprowadzony. Znaki te mogą pochodzić z różnych źródeł np cech wynikających z kluczem jest wciśnięty lub wydany na urządzeniu klawiatury, z przetwarzania metodę wprowadzania edytora, lub wynikające z polecenia głosowego. Gdzie „pasta” operacja generuje prostą sekwencję znaków, to znaczy przejście tekst bez jakiejkolwiek informacji lub struktury stylu, tego typu wydarzenie powinno być generowane również.

input - typ zdarzenia HTML5.

strzały w kontroli, gdy użytkownik zmienia wartość

Firefox, Chrome, IE9 i innych nowoczesnych przeglądarek obsługuje go.

To zdarzenie występuje natychmiast po modyfikacji, w przeciwieństwie do zdarzenia onchange, które występuje, gdy element traci ostrość.

Answer 2

Do it the jQuery way:

<input type="text" id="name" name="name"/> 


$('#name').keyup(function() { 
    alert('Content length has changed to: '+$(this).val().length); 
}); 

Answer 3

Można użyć onkeyup

<input id="name" onkeyup="checkLength(this.value)" /> 

Answer 4

Trzeba by użyć kombinacji onkeyup i onclick (lub onmouseup), jeśli chcesz złapać każdą możliwość.

<input id="name" onkeyup="checkLength(this.value)" onmouseup="checkLength(this.value)" /> 

Answer 5

Oto inne rozwiązanie opracowane dla tego samego problemu. Jednak używam wielu pól wejściowych, więc zachowuję starą wartość jako zdefiniowany przez użytkownika atrybut samych elementów: "wartość-danych". Korzystanie z jQuery jest tak łatwe w zarządzaniu.

 $(document).delegate('.filterBox', 'keyup', { self: this }, function (e) { 
      var self = e.data.self; 

      if (e.keyCode == 13) { 
       e.preventDefault(); 
       $(this).attr('data-value', $(this).val()); 
       self.filterBy(this, true) 
      } 
      else if (e.keyCode == 27) { 
       $(this).val(''); 
       $(this).attr('data-value', ''); 
       self.filterBy(this, true) 
      } 
      else { 
       if ($(this).attr('data-value') != $(this).val()) { 
        $(this).attr('data-value', $(this).val()); 
        self.filterBy(this); 
       } 
      } 
     }); 

tutaj o to, że stosowany 5-6 pudełka wejściowe posiadają klasę „FilterBox”, robię metoda filterBy działać tylko jeśli wartość danych jest inna niż jego wartość.

Answer 6

Jako rozszerzenie dla odpowiedzi katspaugh, oto sposób, aby zrobić to dla wielu elementów przy użyciu klasy css.

$('.myclass').each(function(){ 
     $(this).attr('oldval',$(this).val()); 
    }); 

    $('.myclass').on('change keypress paste focus textInput input',function(){ 
     var val = $(this).val(); 
     if(val != $(this).attr('oldval')){ 
      $(this).attr('oldval',val); 
      checkLength($(this).val()); 
     } 
    });