如何在文本字段中设置焦点

Question

我有一个注册表格。 我想在客户端本身实现一些验证。 我正在使用按钮提交表单。

<button onclick="check_fields();"></button>

 function check_fields() {          
       if(document.contact_form.name.value=='')                                                     
           document.contact_form.name.focus();
       else 
           document.getElementById("contact_form").submit();    
   }

焦点不会发生，而是表单成功提交。 请帮忙。

Answer 1

最好的方法是使用id

说，你有这样定义的文本域：

<input type="text" name="contact" id="contact" />

在你的JavaScript中，这样做会很好：

document.getElementById("contact").focus();

Answer 2

因为document.contact_form.name可能不是您的文本字段。 您的输入字段的名称属性是什么？

如果它的名字是例如myfield，你应该使用：

if(document.contact_form.myfield.value === '') {
   document.contact_form.myfield.focus();
} else { ... }

Answer 3

如果你正确设置html部分它应该工作。 如果不是，您应该在开发者控制台中看到javascript异常（在chrome或firefox中）。

请注意，您可以通过两种方式访问​​表单，一个document.contact_form建议您拥有name =“contact_form”，一个document.getElementById("contact_form")建议您拥有id =“contact_form”，您是否在html中设置了两种方式？ 即。 是否为表单元素设置了name和id？

Answer 4

嗨，看起来你正试图将焦点转移到表单元素上验证错误。 我建议您将控制转移到输入元素，该元素是“form”元素的一部分。

此外，您还可以验证表单“onsubmit”事件的输入，而不是单击按钮。 例如：

<form name="myForm" onsubmit="return validate();"> </form>

//validate function on validation failure returns false else true.
// if validate returns false the browser wouldn't submit the form.

您可以使用以下代码段来关注您选择的元素

document.getElementById("elementId").focus();

Answer 5

我有这个，我希望这有助于你，我在JavaScript中使用focus（）来提示或设置焦点，如果我点击保存或输入按钮而不提供任何值，则会先触发警报然后当你触发时单击确定，焦点将出现在相应的文本字段中：

 <script type="text/javascript"> function validate() /* Validate the if the user leave any field empty. */ { var a = document.getElementById("userid"); var b = document.getElementById("passwrd"); var c = document.getElementById("fname"); var d = document.getElementById("lname"); var e = document.getElementById("email"); var f = document.getElementById("phnno"); var g = document.getElementById("cellphone"); var h = document.getElementById("fax"); var valid = true; if(a.value.length<=0) { a.focus(); alert("Don't leave 'USER NAME' field empty!"); valid = false; } else if(b.value.length<=0){ b.focus(); alert("Don't leave 'PASSWORD' field empty!"); valid = false; } else if(c.value.length<=0){ c.focus(); alert("Don't leave 'FIRST NAME' field empty!"); valid = false; } else if(d.value.length<=0){ d.focus(); alert("Don't leave 'LAST NAME' field empty!"); valid = false; } else if(e.value.length<=0){ e.focus(); alert("Don't leave 'USER EMAIL' field empty!"); valid = false; } else if(f.value.length<=0){ f.focus(); alert("Don't leave 'PHONE NUMBER' field empty!"); valid = false; } else if(g.value.length<=0){ g.focus(); alert("Don't leave 'CELLPHONE NUMBER' field empty!"); valid = false; } else if(h.value.length<=0){ h.focus(); alert("Don't leave 'FAX NUMBER' field empty!"); valid = false; } return valid; }; </script 

 <s:form action="userAction_createUser" method="get" name = "userForm" accept-charset="utf-8" onsubmit="return validate();"> <!-- Display the values in the application --> <table class="createUserT"> <s:textfield name="user.userid" id="userid" cssClass="tb5" label="User Name" /> <s:textfield name="user.passwrd" id="passwrd" cssClass="tb5" label="Password" type="password"/> <%-- <s:textfield name="user.passwrd" cssClass="tb5" label="passwrd" type="password"/> --%> </table> <table class="createUserT"> <s:textfield name="user.fname" id="fname" cssClass="tb5" label="First Name"/> <s:textfield name="user.lname" id="lname" cssClass="tb5" label="Last Name"/> </table> <table class="createUserT"> <s:textfield name="user.email" id="email" cssClass="tb5" label="User Email" type="email"/> <s:textfield name="user.phnno" id="phnno" cssClass="tb5" label="Phone Number"/> </table> <table class="createUserT"> <s:textfield name="user.cellphone" id="cellphone" cssClass="tb5" label="Cellphone Number"/> <s:textfield name="user.fax" id="fax" cssClass="tb5" label="Fax Number"/> </table>