5

我正在尝试创建一个函数，如果用户名无效，它将查看用户名，向用户发送警报，清除用户名字段，并将用户名字段重新聚焦。我正在尝试使用 getElementsByName() 函数来完成这一切。除了让该领域重新成为焦点之外，这一切都在发挥作用。我的代码如下。有没有人有什么建议。

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

}

所以看起来在Java脚本运行之前，焦点字段更改为下一个字段，我的密码输入框......它也有自己的验证功能。我有办法让我的 javascript 代码在下一个文本框（密码框）成为焦点之前为我的用户名字段运行？

4

4 回答 4

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

于 2017-05-05T02:05:04.873 回答
0

大概您有以下形式的控件：

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

所以检查器功能可以是：

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 = '';
  }
}

但这会锁定用户在完成其他任何操作之前完成用户名字段。

于 2014-10-14T01:13:42.037 回答
0

我相信这可能是您问题的解决方案：

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

它设置了一个 onfocus 句柄，而后者又设置了一个 onblur 句柄。这样做是为了防止代码在检测到无效用户名时无限循环。

它还检查 uname 字段是否为空，以免在未选择用户名时将用户困在其中。它为焦点事件添加了一个小的延迟，以确保它在警报窗口关闭后触发。

这些脚本已经在 Chrome、Firefox 和 Internet Explorer 11 上进行了测试。

于 2017-05-05T02:50:42.870 回答
0

这对我有用，使用 Angular 4。我必须自动关注我正在使用的库提供的文本字段。

我在库提供的事件更改中使用了 setTimeout。

但是您可以根据需要将它与 onLoad 或任何事件触发器一起使用。

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

于 2020-06-11T11:20:51.453 回答