Regular text field, user enters a string. Test whether a) there's something in the input, b) that there's no whitespace in the input, and c)is integers only, no other characters. Then the submit button. You'll note that I'm not using html behavior, there's no onclick in the input, strict Content/Presentation/Behavior separation.
My 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>
Note also that the external javascript file is added at the end of the so all elements can load (not worrying about onload right now).
The 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);
When I enter an incorrect input, the logic works, but the cursor isn't focusing back to the text box, no matter what browser I use.
Fiddle: http://jsfiddle.net/2CNeG/
Thank you, Don
The reason that's not working is simply because it's not stealing focus from the dev console. If you run the following code in your console and then quickly click in your browser window after, you will see it focus the search box: setTimeout(function() { $('input[name="q"]'). focus() }, 3000);
JavaScript focus method is used to give focus to a html element. It sets the element as the active element in the current document. It can be applied to one html element at a single time in a current document. The element can either be a button or a text field or a window etc.
To set focus to an HTML form element, the focus() method of JavaScript can be used. To do so, call this method on an object of the element that is to be focused, as shown in the example. Example 1: The focus() method is set to the input tag when user clicks on Focus button.
You will observe that once you have commented your alert box you will be able to see your focus working.But there is a solution for the same. Do try this one.I think it should work.
setTimeout(function() {
document.getElementById('inputBox').focus();
}, 0);
It looks to me like you are focusing on your form element; you need to focus on your text boxes instead:
document.getElementById('inputBox').focus();
or myTextBox.focus()
in your code.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With