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

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（）来提示或设置焦点，如果我点击保存或输入按钮而不提供任何值，则会先触发警报然后当您单击“确定”时，焦点将出现在相应的文本字段中：

＆＃13;

＆＃13;

<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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;