html - javascript, getelementbyname and focus - Stack Overflow

admin管理员组

文章数量:1415062

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(/^\[email protected]$/);
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?

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(/^\[email protected]$/);
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?

• javascript
• html
• inputbox
• getelementsbyname

Share Improve this question Follow edited Oct 14, 2014 at 0:49 Brian asked Oct 13, 2014 at 23:54 BrianBrian 6511 gold badge11 silver badge88 bronze badges 8

• 2 It is document.getElementsByName('uname')[0].focus() I think. – gab06 Commented Oct 13, 2014 at 23:58
• I have tried that without any luck – Brian Commented Oct 14, 2014 at 0:08
• 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 Commented Oct 14, 2014 at 0:18
• 2 More semantic than search would be if (/^\[email protected]$/.test(uname)). Also, pletely deleting user input is very unfriendly. Much nicer to advise of the error and leave it to them to correct. – RobG Commented Oct 14, 2014 at 0:55
• What is uname? Is it a string? Reference to an element? Value of an element? …? – RobG Commented Oct 14, 2014 at 0:57

 |  Show 3 more ments

4 Answers 4

Sorted by: Reset to default 4

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./bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis./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"/>

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(/^\[email protected]$/);

        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.

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 (!/^\[email protected]$/.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 pleting the username field before being able to do anything else.

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"/>

本文标签： htmlJavascriptgetelementbyname and focusStack Overflow