2012-04-06 10 views
6

Regularne pole tekstowe, użytkownik wprowadza ciąg znaków. Sprawdź, czy a) coś jest na wejściu, b) czy nie ma żadnych spacji na wejściu, a c) to tylko liczby całkowite, żadnych innych znaków. Następnie przycisk Wyślij. Należy zauważyć, że nie używam zachowania html, nie ma onclick w wejściach, ścisła separacja treści/prezentacji/zachowania.javascript focus() nie koncentruje się na

Moje HTML:

<form name="basicText" id="basicText" action=""> 
<p>Enter any ol' integer: 
<input type="text" id="inputBox" name="inputBox" size="14"/>  
<input value = "Next...?" type="submit" id="mySubmitBtn" name="mySubmitBtn"/> 
</p> 
</form> 
<script src="js/w1bscript.js" type="text/javascript"></script> 

Należy również zauważyć, że zewnętrzne javascript plik zostanie dodany na końcu więc wszystkie elementy można załadować (nie martwić onload teraz).

Kod JavaScript:

var myButton1 = document.getElementById("mySubmitBtn"); 
var myForm1 = document.getElementById("basicText"); 
var myTextBox = myForm1.inputBox; 

function submitPress() { 
if(myTextBox.value.length == 0) { 
    alert("You didn't enter anything! Once more time, with feeling...") 
    basicText.focus(); 
    basicText.select(); 
} else if(/\s/.test(myTextBox.value)) { 
    alert("Eh... No spaces. Just integers. Try again..."); 
    basicText.focus(); 
    basicText.select(); 
    } else if (isNaN(myTextBox.value)==true) { 
    alert("Eh... Gonna need you to enter ONLY digits this time. kthnx."); 
    basicText.focus(); 
    basicText.select(); 
} else { 
    // The textbox isn't empty, and there's no spaces. Good. 
    alert("you've passed the test!") 
    } 
} 
myButton1.addEventListener('click', submitPress, false); 

Kiedy wprowadzisz błędne dane, logika działa, ale kursor nie jest skupienie się z powrotem do pola tekstowego, bez względu na to, jakiej przeglądarki używam.

Fiddle: http://jsfiddle.net/2CNeG/

Dziękuję Don

Odpowiedz

4

Wygląda mi na to, że skupiają się na swojej elementu formularza; trzeba skupić się na swoich polach tekstowych zamiast:

document.getElementById('inputBox').focus(); 

lub myTextBox.focus() w kodzie.

+0

@DonG Wydaje się również, że przesyłasz formularz niezależnie od pozytywnej weryfikacji. – bfavaretto

+0

Yup; byłoby lepiej dla niego, aby użył przycisku type = 'button' - LUB - aby zwrócić false w funkcji sprawdzania poprawności dla ścieżek, w których weryfikacja kończy się niepowodzeniem. –

+0

OK, widzę twoją sprawę, zmieniłem ją na myTextBox.focus(); i nadal nie ma fokusu do pola wejściowego/tekstowego. – DonG

6

Zauważysz, że po skomentowaniu swojego okna alertu zobaczysz, jak działa fokus. Ale jest na to rozwiązanie. Spróbuj tego. Myślę, że to powinno działać.

setTimeout(function() { 
     document.getElementById('inputBox').focus(); 
    }, 0); 
+0

Tak, widzę, że fokus jest tam przez ułamek sekundy, a potem odchodzi ... – DonG

Powiązane problemy