Wyłącz przycisk, gdy pole tekstowe jest pusty dynamicznie

Oto mój kod:Wyłącz przycisk, gdy pole tekstowe jest pusty dynamicznie

<input type="text" onkeyup="if(this.value.length > 0) document.getElementById('start_button').disabled = false; else document.getElementById('start_button').disabled = true;"/> 
<input type="button" value="Click to begin!" id="start_button" disabled/>

To działa, ale nadal nie wydajny ponieważ użytkownik może usunąć tekst wewnątrz pola tekstowego i kliknij przycisk, podczas gdy on trzyma na klawisz Delete . Czy istnieje skuteczniejszy sposób osiągnięcia tego przy użyciu javascript?

Źródło

2011-08-15 Eng.Fouad

Dodaj zaznaczenie po kliknięciu przycisku, aby sprawdzić, czy jest jakiś tekst. Jeśli nie, wyskakuj okienko alertu (lub inną formę informacji zwrotnej), aby poinformować użytkownika o wprowadzeniu danych i nie wykonuj funkcji przycisku.

Przykład:

<input id="myText" type="text" onkeyup="stoppedTyping()"> 
<input type="button" value="Click to begin!" id="start_button" onclick="verify()" disabled/> 

<script type="text/javascript"> 
    function stoppedTyping(){ 
     if(this.value.length > 0) { 
      document.getElementById('start_button').disabled = false; 
     } else { 
      document.getElementById('start_button').disabled = true; 
     } 
    } 
    function verify(){ 
     if myText is empty{ 
      alert "Put some text in there!" 
      return 
     } 
     else{ 
      do button functionality 
     } 
    } 
</script>

Źródło

2011-08-15 15:37:49 yoozer8

+1 Działa to również, gdy użytkownik korzysta z menu kontekstowego, aby usunąć wartość pola tekstowego. – pimvdb

Dlaczego upadek? – yoozer8

Można sondować wartość wejścia. Byłoby to mniej wydajne i mniej responsywne, ale potencjalnie bardziej niezawodne.

Jak zauważyłeś, zdarzenie keyup nie zostanie wywołane, gdy wartość wejścia zostanie wyczyszczona. Co zrobić, jeśli podświetlają tekst za pomocą myszy, kliknięcie prawym przyciskiem myszy i cięcie?

Zdarzenie zmiany może pomóc, ale nadal nie jest takie niezawodne. Występuje tylko w przypadku rozmycia i pomija niektóre zmiany (np. Wybór autouzupełniania).

Oto a jsFiddle demonstrowanie rozwiązania odpytywania.

W odpowiedzi na komentarz Eng.Fouad, oto jak dodać JS:

Można umieścić go w tagu script, jak to:

<script type="text/javascript"> 
    //my code 
</script>

To będzie działać, ale będzie to oznaczać, że przeglądarka użytkownika nie buforuje JavaScript, co oznacza, że ładowanie strony zajmie więcej czasu. Jest również czystsze oddzielanie skryptów od treści. Ale jeśli chcesz mieć szybką i łatwą opcję, powinno to zrobić. Połóż to na dole ciała i zawiń w pomocnik dom (patrz dolna część odpowiedzi).

Jako opcję czystszą można umieścić ją w pliku zewnętrznym, np. someScript.js, którego treść byłaby twoim JavaScriptem (bez tagów skryptu). Następnie odwołuje się do tego skryptu z pliku HTML:

<html> 
    <head></head> 
    <body> 
     <!-- contents of page --> 
     <script type="text/javascript" src="/path/to/someScript.js"></script> 
    </body> 
</html>

NB: Trzeba dokonać internetowej skrypt dostępny, dzięki czemu przeglądanie stron do http://www.your-site.com/path/to/someScript.js uzyskuje dostęp do skryptu.

Znacznik skryptu znajduje się w dolnej części treści, aby strona wczytała rzeczywistą zawartość, a następnie skrypty. Oznacza to, że Twoje treści będą widoczne dla Twoich użytkowników wcześniej.

Powinieneś dokonać ostatniej modyfikacji JavaScript w jsFiddle. JsFiddle ma kod "onDomReady" (patrz lewy górny róg skrzypiec). Z technicznego punktu widzenia nie musisz tego robić, jeśli masz skrypt po swojej zawartości. Jest tam po to, aby skrypt działał po wczytaniu treści, więc jeśli skrypt spróbuje znaleźć elementy w DOM, zostały one wczytane i znalezione. Powinieneś prawdopodobnie dodać to do skryptu na wypadek, gdyby (z jakiegoś powodu) przesuwał on skrypt przed treścią.W celu owiń skrypt w dom gotowy obsługi w jQuery, to zrobić:

$(function(){ 
    //my code 
});

W tym przykładzie, kod umieścić komentarz //my code gdzie jest będzie działać tylko wtedy, gdy strona jest już gotowa.

Źródło

2011-08-15 15:56:06 Spycho

Przepraszam, wciąż jestem początkujący, ale gdzie powinienem umieścić kod javascript? Próbowałem dodać to w znacznikach skryptu, ale daje mi to błędy. –

Powinieneś prawdopodobnie umieścić go w pliku JS, a także zawinąć go w obsługę gotowego dokumentu (tak, aby nie działał przed załadowaniem zawartości strony). Następnie w pliku HTML dodaj znacznik skryptu z atrybutem src, który jest adresem URL pliku JS. Często umieszcza się ten tag skryptu na dole strony, aby najpierw załadować zawartość strony. Zaktualizuję swoją odpowiedź z pełniejszym wyjaśnieniem. – Spycho

<input type="number" id="abc" onkeyup="s()"> 
<input type="submit" id="abc2" disabled > 
<script type="text/javascript"> 
function s(){ 
var i=document.getElementById("abc"); 
if(i.value=="") 
    { 
    document.getElementById("abc2").disabled=true; 
    } 
else 
    document.getElementById("abc2").disabled=false;}</script>

Źródło

2017-07-10 07:00:37

Wyłącz przycisk, gdy pole tekstowe jest pusty dynamicznie

Odpowiedz

Powiązane problemy