在A网页里点击“打开”按钮后,利用JS打开网页B;网页B里包含若干个文本框和一个“确定”按钮,用户点击“确定”按钮后,网页B检查是否有文本框输入为空;若有空,将焦点定为到空文本框,否则关闭网页B,并将网页B中文本框内容显示到网页A中。
时间: 2024-04-30 08:25:17 浏览: 10
首先,在网页A中的“打开”按钮上添加一个点击事件,利用JS打开网页B:
```
<button id="openBtn" onclick="openWebPage()">打开</button>
<script>
function openWebPage() {
window.open('网页B的URL');
}
</script>
```
在网页B中,我们可以使用以下代码来检查文本框是否为空,并将焦点定位到第一个空文本框:
```
<input type="text" id="input1">
<input type="text" id="input2">
<button onclick="checkInput()">确定</button>
<script>
function checkInput() {
var input1 = document.getElementById('input1').value;
var input2 = document.getElementById('input2').value;
if (input1 === '' || input2 === '') {
if (input1 === '') {
document.getElementById('input1').focus();
} else {
document.getElementById('input2').focus();
}
} else {
window.opener.document.getElementById('result').innerText = '输入1:' + input1 + ',输入2:' + input2;
window.close();
}
}
</script>
```
在网页B中,我们首先获取两个文本框的值,并判断是否为空。如果有空文本框,我们就将焦点定位到第一个空文本框;否则,我们将网页B中两个文本框的值显示到网页A中,并关闭网页B。
在网页A中,我们需要再添加一个元素用来显示网页B中的文本框内容:
```
<div id="result"></div>
```
最后,我们可以将以上代码整合在一起,形成完整的网页A和网页B代码:
网页A:
```
<!DOCTYPE html>
<html>
<head>
<title>网页A</title>
<meta charset="UTF-8">
</head>
<body>
<button id="openBtn" onclick="openWebPage()">打开</button>
<div id="result"></div>
<script>
function openWebPage() {
window.open('网页B的URL');
}
function setResult(str) {
document.getElementById('result').innerText = str;
}
</script>
</body>
</html>
```
网页B:
```
<!DOCTYPE html>
<html>
<head>
<title>网页B</title>
<meta charset="UTF-8">
</head>
<body>
<input type="text" id="input1">
<input type="text" id="input2">
<button onclick="checkInput()">确定</button>
<script>
function checkInput() {
var input1 = document.getElementById('input1').value;
var input2 = document.getElementById('input2').value;
if (input1 === '' || input2 === '') {
if (input1 === '') {
document.getElementById('input1').focus();
} else {
document.getElementById('input2').focus();
}
} else {
window.opener.setResult('输入1:' + input1 + ',输入2:' + input2);
window.close();
}
}
</script>
</body>
</html>
```