Question

我正在尝试创建将查看用户名的函数，如果它无效，则向用户发送警报，清除用户名字段，并将用户名字段重新置于焦点。我试图用getElementsBynName（）函数完成所有这些。除了让这个领域重新成为焦点之外，所有这些都在努力。我的代码如下。有没有人有任何建议。

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代码运行我的用户名字段吗？

Answer 1

<强> JavaScript的：

document.getElementsByName（＆＃39;名称＆＃39;）[0] .focus（）

<强> Jquery的：

$（＆＃34;＃名称＆＃34;）[0] .focus（）

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

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

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

但这会阻止用户完成用户名字段，然后才能执行其他操作。

Answer 3

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

它还会检查uname字段是否为空，以便在没有选择用户名时不会将用户留在那里。它会为焦点事件增加一点延迟，以确保在警报窗口关闭后触发它。

这些脚本已在Chrome，Firefox和Internet Explorer 11上进行过测试。

Answer 4

这对我来说适用于Angular4。我不得不自动聚焦于我正在使用的库提供的文本字段上。

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

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

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

<input name="search-text"/>

javascript，getelementbyname和焦点

4 个答案: