如何将光标集中在表单元素上

How to focus cursor on form element?

本文关键字：表单 元素 集中 光标      更新时间：2023-09-26

我想在表单元素中的空输入后添加光标。第一个空表单所在的位置
为此，我尝试将this.focus();添加到validate()函数中。但这并没有成功。

第二点——如何将brovser页面出现后的光标设置为第一个表单元素。我尝试将这种目标onLoad();方法转化为body。但这并没有成功。

代码：

<html>
    <head>
        <title>Form with check</title>
            <script>
                function validate() {
                    if(document.form1.yourname.value.length < 1) {
                        alert("Enter your name, please");
                        this.focus();
                        return false;
                    }
                    if(document.form1.adress.value.length < 3) {
                        alert("Enter your adress, please");
                        this.focus();
                        return false;
                    }
                    if(document.form1.phone.value.length < 3) {
                        alert("Enter your phone number, please");
                        this.focus();
                        return false;
                    }
                    return true;
                }
            </script>
    </head> 
        <body>
            <h1>Form with check</h1>
            <p>Input all data. When button Submit pushed data will be sent as message.</p>  
                <form name="form1" action="mailto:user@host.com" enctype="text/plain"
                onSubmit="validate();">
                    <p><b>Name:</b><input type="text" length="20" name="yourname">
                    </p>
                    <p><b>Adress:</b><input type="text" length="20" name="adress">
                    </p>
                    <p><b>Phone:</b><input type="text" length="20" name="phone">
                    </p>
                    <input type="SUBMIT" value="Submit">                    
            </form>
            onLoad();
        </body>    
</html>

问题：

  • 如何将此功能添加到表单

你忘了做了吗

onSubmit="return validate();" ?

用document.form1.yourname.focus(); 替换this.focus()

这是重新处理的代码：

<html>
    <head>
        <title>Form with check</title>
            <script>
                function validate() {
                    if(document.form1.yourname.value.length < 1) {
                        alert("Enter your name, please");
                        document.form1.yourname.focus();
                        return false;
                    }
                    if(document.form1.adress.value.length < 3) {
                        alert("Enter your adress, please");
                       document.form1.adress.focus();
                        return false;
                    }
                    if(document.form1.phone.value.length < 3) {
                        alert("Enter your phone number, please");
                        document.form1.phone.focus();
                        return false;
                    }
                    document.getElementById("ff").submit();
                    return true;
                }
            </script>
    </head> 
        <body >
            <h1>Form with check</h1>
            <p>Input all data. When button Submit pushed data will be sent as message.</p>  
                <form id="ff" name="form1" action="mailto:user@host.com" enctype="text/plain"
                >
                    <p><b>Name:</b><input type="text" length="20" name="yourname">
                    </p>
                    <p><b>Adress:</b><input type="text" length="20" name="adress">
                    </p>
                    <p><b>Phone:</b><input type="text" length="20" name="phone">
                    </p>
                    <input type="button" value="Submit" onclick="validate();">                    
            </form>
        </body>    
</html>

工作DEMO也

onSubmit="validate();"

在验证函数的上下文中，this将是全局窗口对象。

要处理函数中的表单，根据您的代码，您可以使用document.form1或通过id(或其他选择器(手动调用它，也可以将表单发送到函数：

  <script>
        function validate(sender) {
            if(sender.yourname.value.length < 1) {
                alert("Enter your name, please");
                sender.focus();
                return false;
            }
            if(sender.adress.value.length < 3) {
                alert("Enter your adress, please");
                sender.focus();
                return false;
            }
            if(sender.phone.value.length < 3) {
                alert("Enter your phone number, please");
                sender.focus();
                return false;
            }
            return true;
        }
    </script>
    <form name="form1" action="mailto:user@host.com" enctype="text/plain" onSubmit="validate(this);">
        <p>
           <b>Name:</b><input type="text" length="20" name="yourname">
        </p>
        <p>
           <b>Adress:</b><input type="text" length="20" name="adress">
        </p>
        <p>
           <b>Phone:</b><input type="text" length="20" name="phone">
        </p>
        <input type="SUBMIT" value="Submit">                    
   </form>
相关文章：