在A网页里点击“打开”按钮后,利用JS打开网页B; 网页B里包含若干个文本框和一个“确定”按钮,用户点击“确定”按钮后,网页B检查是否有文本框输入为空; 若有空,将焦点定为到空文本框,否则关闭网页B,并将网页B中文本框内容显示到网页A中。
时间: 2023-06-20 13:09:08 浏览: 71
实现该功能的核心是通过JS在网页A中打开网页B,并且在网页B中检查用户输入的文本框是否为空,如果为空则将焦点定位到该文本框,否则关闭网页B并将文本框内容显示到网页A中。
以下是实现该功能的代码示例:
在网页A中:
```html
<!DOCTYPE html>
<html>
<head>
<title>网页A</title>
<script>
function openPageB() {
var pageB = window.open("pageB.html", "pageB");
}
function receiveData(data) {
document.getElementById("result").innerHTML = data;
}
</script>
</head>
<body>
<h1>网页A</h1>
<button onclick="openPageB()">打开网页B</button>
<p>网页B返回的数据:</p>
<p id="result"></p>
</body>
</html>
```
在网页B中:
```html
<!DOCTYPE html>
<html>
<head>
<title>网页B</title>
<script>
function checkInput() {
var inputs = document.getElementsByTagName("input");
for (var i = 0; i < inputs.length; i++) {
if (inputs[i].value == "") {
alert("请输入完整信息!");
inputs[i].focus();
return false;
}
}
return true;
}
function sendData() {
if (checkInput()) {
var data = "";
var inputs = document.getElementsByTagName("input");
for (var i = 0; i < inputs.length; i++) {
data += inputs[i].value + " ";
}
window.opener.receiveData(data);
window.close();
}
}
</script>
</head>
<body>
<h1>网页B</h1>
<form>
<label>输入框1:<input type="text"></label><br>
<label>输入框2:<input type="text"></label><br>
<label>输入框3:<input type="text"></label><br>
<button type="button" onclick="sendData()">确定</button>
</form>
</body>
</html>
```
在网页A中,通过`window.open()`方法打开网页B。在网页B中,通过`window.opener`获取到父窗口`window`对象,并调用`window.opener.receiveData()`方法将数据传递给网页A。在网页A中,通过定义`receiveData()`函数来接收来自网页B的数据,并将其显示在网页A中。
同时,网页B中定义了`checkInput()`函数来检查文本框是否为空,如果有空文本框,则将焦点定位到该文本框并提示用户输入完整信息。若所有文本框均不为空,则调用`sendData()`函数将文本框内容传递给网页A,并关闭网页B。
阅读全文