javascript, getelementbyname and focus

Question

我正在尝试创建一个函数，该函数将查看用户名是否有效，如果无效，则向用户发送警报，清除用户名字段，并将用户名字段重新放回焦点。我正在尝试使用getElementsBynName()函数完成所有操作。除了将字段重新放回焦点之外，一切都正常工作。以下是我的代码。有没有人有什么建议。

function uchecker(uname)
{
var validUname = uname.search(/^\[e-mail]$/);
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代码在下一个文本框（密码框）获得焦点之前先运行我的用户名字段的验证？

- Brian

---

我认为应该是 document.getElementsByName('uname')[0].focus()。 - gab06

比“搜索”更语义化的是 if (/^\[e-mail]$/.test(uname))。此外，完全删除用户输入非常不友好。最好建议用户错误并让他们自行更正。 - RobG

uname 是什么？它是一个字符串吗？还是一个元素的引用？或者是一个元素的值？...？ - RobG

uname是一个输入文本框的名称属性。 - Brian

如果监听器在元素上，则可以在addEventListener附加的侦听器中将其作为this获取，或者在内联侦听器中传递this。请注意，在元素通过验证之前将焦点放在该元素上的策略会严重 frustrate用户，特别是在与警报结合使用并在onblur上调用时。警报会导致元素失去焦点，调用验证，清除元素，调用警报，导致它失去焦点，进而调用验证... 不断循环。 - RobG

Answer 1

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

- Aravindh Gopi

Answer 2

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

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

    uname.onblur = function () {
        var isValidUname = uname.value.search(/^\[e-mail]$/);

        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上进行了测试。

- DaftKauries

Answer 3

假设您在表单中有控件，如下所示：

<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 (!/^\[e-mail]$/.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 = '';
  }
}

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

- RobG

Answer 4

这对我来说起作用了，适用于Angular 4。我必须将焦点设置在一个由我使用的库提供的文本字段上。

我在该库提供的事件变化内部使用了setTimeout。

但你可以根据需要在onLoad或任何触发事件中使用它。

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

<input name="search-text"/>

- Niveditha Karmegam