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

【问题标题】：Close window when "input" is not empty当“输入”不为空时关闭窗口
【发布时间】：2014-01-03 20:17:34
【问题描述】：

所以我的脚本中有一个表单，所以有很多输入标签。当有人在输入中写东西并意外关闭页面时，应该出现：

alert("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){
        alert("You have to fill the whole form.");
    }
};

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

【问题讨论】：

长度长度拼写错误？
应该是input.value.length ... 以后也请给出您收到的错误信息。此外，您可能需要检查该值是否不是一堆空格。
请使用 getElementById 并检查这篇文章 onbeforeunload 功能，并非每个浏览器都支持window.onbeforeunload and window.onunload is not working in Firefox , Safari , Opera?

标签： javascript jquery html input

【解决方案1】：

您需要运行您的代码并注意拼写错误，还要检查您的控制台！就您的代码而言，您看到的第一个错误是：

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

这是因为正确的方法是getElementsByTagName（看到那个“s”）？使用getElementById 定位单个元素，否则您将收到一个集合。除此之外，就是错别字！

如果您仍然使用getElementsByTagName - 只需针对您想要的元素的正确索引！因此，如果您只有 1 个输入，请使用 [0]

【讨论】：

@DOCTYPEHTML -- 因为你得到了一个集合，所以写一个循环来迭代每个元素，然后做你的检查
这是正确的解决方案@DOCTYPEHTML，input 是一个类似数组的对象，你必须遍历它（因为你可以拥有无限数量的 input 标签！），一旦你这样做会奏效。

【解决方案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 中对此进行了测试。它正在工作。

【讨论】：

当所有输入为空时不应该出现返回！
现在出现了另一个问题，我有另外两个不同的输入的 CHECKBOX 和 RADIO，脚本不适用。这是一个小提琴：jsfiddle.net/dV9sU/6 没有两个不同的输入：jsfiddle.net/dV9sU
只需使用 input[i].value 和 input[i].checked 参数调整条件检查的代码。希望以上一个会起作用。
如果根据ID检查输入会很麻烦。最好使用输入类型一次检查所有输入。但是，如果您想限制某些输入，请在循环内的 If else 块中添加您的条件。
用这个 if((input[i].value == "" && (input[i].type == 'text' || input[i].type = = 'email')) || (input[i].checked == false && input[i].type != 'text'))

【解决方案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.';
}

【讨论】：

【解决方案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>

【讨论】：