当“输入”不为空时关闭窗口
[英]Close window when “input” is not empty
问题描述
So I have a form in my script, so there are a lot of input tags.
所以我的脚本中有一个表单，所以有很多输入标签。 When someone writes something in the input and closes the page accidentally, then should appear:当有人在输入中写入内容并意外关闭页面时，应该会出现：
alert("You have to fill the whole form.");
This is my code now:这是我现在的代码：
HTML 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.");
}
};
My question is, what am I doing wrong?我的问题是，我做错了什么？
4 个解决方案
解决方案1
4 2014-01-03 20:30:47
You need to run through your code and pay attention to spelling errors, also check your console!您需要运行您的代码并注意拼写错误，还要检查您的控制台！ As your code stands, the first error you see is:就您的代码而言，您看到的第一个错误是：
Uncaught TypeError: Object #<HTMLDocument> has no method 'getElementByTagName'
This is because the correct method is getElementsByTagName (see that "s")?这是因为正确的方法是getElementsByTagName （见“s”）？ Use getElementById to target a single element, else you'll receive a collection.使用getElementById定位单个元素，否则您将收到一个集合。 Other than that, it's the typos!除此之外，还有错别字！
If you still use getElementsByTagName -- just target the correct index of the element you want!如果您仍然使用getElementsByTagName —— 只需定位您想要的元素的正确索引！ So if you only have 1 input, use [0]因此，如果您只有 1 个输入，请使用[0]
解决方案2
2 已采纳 2014-01-06 18:53:49
<!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>
Hope this code block works for you.希望这个代码块对你有用。 :) I have tested this in chrome and mozilla firefox. :) 我已经在 chrome 和 mozilla firefox 中测试过了。 It is working.它正在工作。
解决方案3
1 2014-01-07 18:06:23
Solution, bases on jQuery.解决方案，基于 jQuery。 Tested in FF and Chrome.在 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
0 2014-01-07 12:30:11
Looking your code, I can find a lot of issues.查看您的代码，我可以发现很多问题。
1."getElementByTagName" should be "getElementsByTagName", and this function returns a list/array of elements matching the criteria, so you will have to get an element from the array and verify it. 1.“getElementByTagName”应该是“getElementsByTagName”，这个函数返回一个符合条件的元素列表/数组，所以你必须从数组中获取一个元素并验证它。
I have edited the code and it works for me.我已经编辑了代码，它对我有用。 Check it if it solves your purpose…检查它是否解决了您的目的......
<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>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.