javascript、getelementsbyname 和焦点

Posted 2023-04-18

【中文标题】javascript、getelementsbyname 和焦点

【英文标题】：javascript, getelementbyname and focus

【发布时间】：2014-12-08 15:33:09

【问题描述】：

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

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 代码在下一个文本框（密码框）成为焦点之前为我的用户名字段运行？

【问题讨论】：

我想是document.getElementsByName('uname')[0].focus()。

我试过了，没有运气

也许这不是，但尝试为输入框分配一个空字符串而不是 null：document.getElementsByName('uname')[0].value ='' 并使用 focus() 方法。

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

什么是uname？它是一个字符串吗？引用一个元素？元素的价值？ …?

【参考方案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"/>

【参考方案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 (!/^\[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 = '';
  

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

【参考方案3】：

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

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

【参考方案4】：

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

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

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

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

<input name="search-text"/>