Question

所以我的脚本中有一个表单，所以有很多输入标签。当有人在输入中写入内容并意外关闭页面时，应显示：

return "You have to fill the whole form.";

这是我现在的代码：

的 HTML 的

<input placeholder="name" />

的 JAVASCRIPT 的

window.onbeforeunload = function () {
    var input = document.getElementByTagName("input");
    if (input.value.length > 0){
        return "You have to fill the whole form.";
    }
};

我的问题是，我做错了什么？

Answer 1

您需要运行代码并注意拼写错误，同时检查您的控制台！正如您的代码所示，您看到的第一个错误是：

Uncaught TypeError: Object #<HTMLDocument> has no method 'getElementByTagName'

这是因为正确的方法是getElementsByTagName（参见＆＃34; s＆＃34;）？使用getElementById定位单个元素，否则您将收到一个集合。除此之外，这是拼写错误！

如果您仍然使用getElementsByTagName - 只需定位所需元素的正确索引即可！因此，如果您只有1个输入，请使用[0]

Answer 2

    <!DOCTYPE html>
<html>
<head>
    <title>Demo Page</title>
</head>
<body>
    <input type="email" placeholder="email">
    <input type="text" placeholder="2">
    <input type="text" placeholder="3">
    <input type="text" placeholder="4">
       <br/>
    <input type="radio">
        <input type="checkbox">

    <script type="text/javascript">
        window.onbeforeunload = function (e) {
        var input = document.getElementsByTagName("input");
        var returnArr = [];
        for (var i = 0; i < input.length; i++) {
            if((input[i].value == "" && (input[i].type == 'text' || input[i].type == 'email')) || (input[i].checked == false && input[i].type != 'text') ){
            returnArr.push(false);
        }
            else{
                returnArr.push(true);
            }
        };
        returnArr = sort_unique(returnArr);
        if(returnArr[0] == false && returnArr[1] == true)
        return "You have to fill the whole form.";
    };

    function sort_unique(arr) {
        arr = arr.sort(function (a, b) { return a*1 - b*1; });
        var ret = [arr[0]];
        for (var i = 1; i < arr.length; i++) { // start loop at 1 as element 0 can never be a duplicate
        if (arr[i-1] !== arr[i]) {
            ret.push(arr[i]);
        }
        }
        return ret;
    }
    </script>
</body>
</html>

希望此代码块适合您。 :) 我在chrome和mozilla firefox中测试了这个。它正在发挥作用。

Answer 3

解决方案，基于jQuery。在FF和Chrome中测试过。

window.onbeforeunload = function() {
    var empty = false;

    $('input').each( function() {
        if ( $(this).val() == '' ) {
            empty = true;
            return false;
        }
    });

    if ( empty ) return 'You have to fill the whole form.';
}

Answer 4

查看代码，我可以发现很多问题。

1.“getElementByTagName”应为“getElementsByTagName”，此函数返回符合条件的元素列表/数组，因此您必须从数组中获取元素并进行验证。

我编辑了代码，它对我有用。检查它是否能解决你的目的......

<html>
<head>
</head>
<body>
<input placeholder="name" />
<script type="text/javascript">
window.onbeforeunload = function () { 
var inputs = document.getElementsByTagName("input");
var input = inputs[0];

if (input.value.length > 0){
    return "You have to fill the whole form.";
}
};
</script>
</body>
</html>

“输入”不为空时关闭窗口

4 个答案: