Question

我创建了一个表单，当用户单击表单外的任何位置时，我要清除所有字段。用户在表单外单击时是否可以重置字段？我怎么能这样做。

Answer 1

您可以在.reset()

设置的event.currentTarget事件处理程序中使用click和document

document.onclick = e => {
  if (e.currentTarget !== document.forms[0])
    document.forms[0].reset()
}

Answer 2

使用jquery，你可以：

处理文档单击
获得点击目标
如果目标不是表单，则触发表单

触发重置事件比逐个重置所有元素更有效。此触发事件将重置所有表单元素，如文本输入，textarea，复选框，单选按钮......

$(document).click(function (e) {
    var target = e.target;
    if (!$(target).is('#formID') && !$(target).parents().is('#formID')) {
        $('#formID').trigger("reset");
    }
});

Answer 3

这很有效。

$("html,body").click(function(e){
    var form = $("#formone");
    if(e.target !== form[0])
    {
        form[0].reset();
    }
})

#formdiv
{
height:100%
width:100%;
background:red;
margin:0;
}
#formone
{
    height:100px;
    width:200px;
    background:yellow;
    padding:10px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="formdiv">
<form name="formone" id="formone">
Name : <input type="text">
</form>
</div>

Answer 4

这里有javascript代码，小提琴：https://jsfiddle.net/sancoLgates/81sjkow0/1/

HTML

<div id="wrapper">
  <form action="" id="sanzform">
    <input type="text" />
    <input type="text" />
  </form>
</div>

的Javascript

var body = document.getElementById('wrapper');
var sanzform = document.getElementById('sanzform');
body.addEventListener("click", function () {
alert("reset");sanzform.reset();}, false);

sanzform.addEventListener("click", function (ev) {ev.stopPropagation();}, false);

当用户单击表单外的任何位置时，清除表单字段

4 个答案: