Question

我只是在输入字段中添加文本进行练习。似乎当我按下提交时，文本会在输入字段中显示一小段时间然后消失。有人可以告诉我为什么会这样吗？我怎样才能收到留言？

<!DOCTYPE html>
<html>
<head>
<title>Title</title>
<script src="EventUtil.js"></script>
</head>
<body>
    <form>
        <input type="text" name="poop1"> <br>
        <input type="text" name="poop1"> <br>
        <input type="text" name="poop1"> <br>
        <input type="text" name="poop1"> <br>
        <input type="submit" value="submit" id="btn">
    </form>
    <script type="text/javascript">
        EventUtil.addHandler(window,"load", function() {
            var btn = document.getElementById("btn");
            EventUtil.addHandler(btn,"click",function(){
                var i;
                for (i=0; i<document.forms[0].elements.length-1; i++){
                    if (document.forms[0].elements[i].value == ""){
                        document.forms[0].elements[i].value = "fill this poop in";
                    }
                }
            })
        })
    </script>
</body>
</html>

Answer 1

问题是您提交的表单会重新加载当前页面。这就是为什么你只看片刻的原因。

要解决此问题，请使用<button type="button">代替<input type="submit">。

Answer 2

您应该将监听器放在表单的提交处理程序而不是提交按钮上，因为可以在不单击按钮的情况下提交表单。向表单添加ID，或使用文档forms collection：

var form = document.forms[0];

或

var form = document.getElementById('formID');

如其他答案中所述，表单正在提交，因此页面会刷新。要取消提交，请从侦听器返回false。

在监听器中，此应引用表单：

EventUtil.addHandler(form, 'submit', function(){
    var control, controls = this.elements;

    for (var i=0, iLen=controls.length; i<iLen; i++) {
      control = controls[i];

      if (control.type == 'input' && control.type == 'text' && control.value == '') {
        control.value = 'fill this shit in';
        return false;
      }
    }
});

Answer 3

为什么不在表单元素上使用必需的属性

JavaScript表单验证 - 此代码有什么问题？

3 个答案: