Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

javascript focus() isn't focusing

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

like image 667
DonG Avatar asked Apr 06 '12 03:04

DonG


People also ask

Why focus () is not working?

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);

When focus () method is used in JavaScript?

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.

How do you manage focus in JavaScript?

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.


2 Answers

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);
like image 183
sTg Avatar answered Sep 18 '22 01:09

sTg


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.

like image 43
Authman Apatira Avatar answered Sep 21 '22 01:09

Authman Apatira