javascript, getelementbyname and focus

Question

I am trying to create function that will look at the username if it is not valid send an alert to the user, clear the username field, and put the username field back into focus. I am trying to do this all with the getElementsBynName() function. It is all working with the exception of getting the field back into focus. My code is below. Does anyone have any suggestions.

function uchecker(uname)
{
var validUname = uname.search(/^\w+@sabc.com$/);
if(validUname != 0)
{
    alert("You have entered an invalid username. \n The username must be a valid @sju.edu    email    address value " + document.getElementsByName('uname')[0].value);
    document.getElementsByName('uname')[0].value = null;
    document.getElementsByName('uname')[0].focus();

    /I have also tried  document.getElementsByName('uname').focus, document.getElementsByName('uname')[0].value.focus();
}

}

So it appears that before the Java script runs the field that is in focus changes to the next field, my password input box...which also has its own validation function. I there a way to get my javascript code to run for my username field before the next textbox (password box) is takes focus?

It is `document.getElementsByName('uname')[0].focus()` I think. — gab06, Oct 13 '14 at 23:58
Maybe this isn't but try asigning an empty string to the inputbox instead of null: `document.getElementsByName('uname')[0].value =''` and use the `focus()` method. — gab06, Oct 14 '14 at 00:18
More semantic than *search* would be `if (/^\w+@sabc.com$/.test(uname))`. Also, completely deleting user input is very unfriendly. Much nicer to advise of the error and leave it to them to correct. — RobG, Oct 14 '14 at 00:55
What is *uname*? Is it a string? Reference to an element? Value of an element? …? — RobG, Oct 14 '14 at 00:57
If the listener is on the element, you can get it as *this* within a listener attached by *addEventListener*, or passing *this* in an inline listener. Note that a strategy of putting focus on the element until it passes validation will seriously frustrate users, especially when combined with an alert and called onblur. The alert causes the element to loose focus, calling the validation, which clears the element, calls the alert, causes it to lose focus, which calls validation… *ad infinitum*. — RobG, Oct 14 '14 at 01:09
Yes that is eexactly the issue I am getting...is there a better way — Brian, Oct 14 '14 at 01:17

Aravindh Gopi · Answer 1 · 2017-05-08T06:44:05.747

JavaScript:

document.getElementsByName('name')[0].focus()

Jquery:

$("#name")[0].focus()

function valid(){
  var nameObj = document.getElementsByName("testing");
  for(var i=0; i<nameObj.length; i++){
    if(nameObj[i].value == ""){
      //$(nameObj)[i].focus();  //Jquery
      nameObj[i].focus();       //Js
      alert("Please Fill all the text boxes");
      break;
    }
  }
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<style>
.input-sm{
  width:200px
}
</style>
<input name="testing" class="form-control input-sm" type="text" id="test_01"/><br> 

<input name="testing" class="form-control input-sm" type="text" id="test_02"/><br>
<input name="testing" class="form-control input-sm" type="text" id="test_03"/><br>
<input name="testing" class="form-control input-sm" type="text" id="test_04"/><br>
<input type="button" class="btn btn-primary" onclick ="valid()" value="Click Me"/>

DaftKauries · Answer 2 · 2017-05-05T07:06:30.490

I believe this might be a solution to your problem:

function onUnameFocus() {
    var uname = document.getElementsByName("uname")[0];

    uname.onblur = function () {
        var isValidUname = uname.value.search(/^\w+@sabc.com$/);

        if (uname.value !== "" && isValidUname) {
            uname.onblur = null;
            alert("You have entered an invalid username. \n The username must be a valid @sju.edu    email    address value " + uname.value);
            uname.value = "";
            setTimeout(function () { uname.focus(); }, 1);
        }
    }
};

<input name="uname" onfocus="onUnameFocus()" />

It sets a onfocus handle which in turn sets an onblur handle. This is been done to prevent the code from looping infinitely when it has detected an invalid username.

It also checks if the uname field is empty in order not the trap the user in there when no username has been chosen. And it adds a small delay to the focus event to ensure that it fires after the alert window has been closed.

These scripts have been tested on Chrome, Firefox and Internet Explorer 11.

score 0 · Answer 3 · answered Oct 14 '14 at 01:13

Presumably you have controls in a form like:

<form ...>
  Username: <input type="text" name="uname" onblur="uchecker(this)">
  <span id="unameMsg"></span>
  <br>
  Password: <input type="password" name="password">
  ...
</form>

so the checker function can be:

function uchecker(element) {

  // If fail validation, show message, clear input, return focus      
  if (!/^\w+@sabc.com$/.test(element.value)) {
    document.getElementById(element.name + 'Msg').innerHTML = 'You have entered an invalid username. ...';
    element.value = '';
    element.focus();

  // Otherwise, clear message
  } else {
    document.getElementById(element.name + 'Msg').innerHTML = '';
  }
}

But this locks the user into completing the username field before being able to do anything else.

score 0 · Answer 4 · answered Jun 11 '20 at 11:20

This worked for me, with Angular 4. I had to autofocus on a text field given by a library I was using.

I used the setTimeout inside an event change provided by the library.

But you could use it with onLoad or any event triggers as you need.

setTimeout(() => {
  document.getElementsByName('search-text')[0].focus();
}, 100);

<input name="search-text"/>

javascript, getelementbyname and focus

4 Answers4

Linked