我需要创建一个重置按钮，在表单重置后将焦点设置在第一个表单字段上答案

【问题标题】：I need to create a reset button that sets focus on the first form field after the form resets我需要创建一个重置按钮，在表单重置后将焦点设置在第一个表单字段上
【发布时间】：2023-03-15 05:36:02
【问题描述】：

这是 HTML5 代码：

<form name="memberInfo">
<table border=1>
<tr><td>Username</td><td><input id="username"   /></td></tr>
<button type = "reset" id = "resetButton">Reset</button>
<input type=button value="submit" onclick="Validate()"/>
</table>
</form>

这里是 JavaScript 代码：

window.onload =function(){
var _getForm = document.getElementById("memberInfo");
_getForm.addEventListener('reset',function(){
document.getElementById("username").focus()
})
}

【问题讨论】：

您的页面中有哪些表单？请出示您的 HTML 代码
你试过.focus()吗？
查看这个stackoverflow.com/questions/277544/…
这只是一种形式

标签： javascript html

【解决方案1】：

使用button type ="reset" 和focus()

希望这个 sn-p 有用

HTML

<form id = "myForm">
    <input type = "text" id ="text1">
    <input type = "text" id ="text2">
    <input type = "text" id ="text3">
    <button type = "reset" id = "restButton">Reset</button>
    </form>

   var _getForm = document.getElementById("myForm");
    _getForm.addEventListener('reset',function(){
    document.getElementById("text1").focus()
    })

查看jsfiddle

编辑

您可以使用firstElementChild 代替document.getElementById("firtChild")。

更新jsFiddle

Edit-2

如果你已经把你的代码放在 head 标签里，你可以在窗口加载后使用 window.onload 来附加事件监听器

 window.onload =function(){
    var _getForm = document.getElementById("your form id");
    _getForm.addEventListener('reset',function(){
    document.getElementById("text1").focus()
    })
    }

EDIT-3

随着原始问题的最新变化，这里有一些更新

注意

没有带有id=memberInfovar 的表单。有name="memberInfovar" 的形式。所以这个_getForm = document.getElementById("memberInfo"); 将抛出addEventListener of null
<input id="username" /> 添加此输入的类型，即input type = "text"
<input type=button。 type 必须用双引号括起来，即<input type="button">

检查这个jsfiddle

【讨论】：

a downvote 没有帮助，除非它有助于纠正答案。顺便说一下 jsfiddle 工作正常
我没有投反对票，是的，它在 js fiddle 中工作，但由于某种原因，当我在我的代码中实现它时出现错误
未捕获的类型错误：无法读取 null 的属性“addEventListener”
您的表单是否有 id 作为 myForm？你也需要在你的 dom 加载后触发它
不，它的 id 不同，但我更改了你给我的 javascript 中的 id 以匹配它。

【解决方案2】：

<form id = "myForm">
<input type = "text" id ="text1">
<input type = "text" id ="text2">
<input type = "text" id ="text3">
<button type = "reset" id = "restButton">Reset</button>
</form>

$("#myForm").submit(function()
{
$('#myForm').trigger("reset");
$('#text1').focus();
return true;
});

【讨论】：