使用 javascript 在 HTML 中弹出文本框
Posted
技术标签:
【中文标题】使用 javascript 在 HTML 中弹出文本框【英文标题】：Popup text box in HTML with javascript 【发布时间】：2018-08-23 22:15:48 【问题描述】：我需要设计一个文本框textbox
如上图。
它应该有两个文本框，如果我编辑一个，它应该反映在另一个文本框中（反之亦然）。
请帮我解决这个问题。
提前致谢
【问题讨论】：
嗨@don - 请提供您已经尝试使用的代码。 请显示你的css代码 【参考方案1】：这是你想要的吗？
var textarea1 = document.getElementById("textarea1");
var textarea2 = document.getElementById("textarea2");
var button = document.getElementById("button");
function Show(button)
if (button.innerhtml = "Show")
button.innerHTML = "Hide" ;
textarea2.style.display = "inline";
else
button.innerHTML = "Show" ;
textarea2.style.display = "none";
function change1()
textarea2.value = textarea1.value;
function change2()
textarea1.value = textarea2.value;
<textarea id="textarea1" onkeyup="change1();"></textarea>
<textarea id="textarea2" onkeyup="change2();" style="display:none"></textarea> <br />
<button onclick="Show(this)">Show</button>【讨论】：
你的意思是警告框吗？ 没有第二个文本框需要隐藏，如果我单击按钮，如果我更改第二个框（弹出框）中的内容，它需要显示，我需要反映在第一个文本中。 .【参考方案2】：这符合您的要求吗？
function showPopup()
document.getElementById('2').style.display = "block";
function syncValueWith2()
document.getElementById('2').value = document.getElementById('1').value;
function syncValueWith1()
document.getElementById('1').value = document.getElementById('2').value;
<textarea onkeyup="syncValueWith2()" id="1"></textarea>
<br>
<textarea onkeyup="syncValueWith1()" id="2" style="display: none;"></textarea>
<input type="button" value="Show Popup" onclick="showPopup()">【讨论】：
【参考方案3】：@Keshav 解决方案将在您每次完成编辑文本区域时更新
如果你想在按键时直接更新它，你可以使用 jQuery 和这段代码：
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8' />
<title>Test</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<textarea class="textarea-1" rows="4" cols="50">
test
</textarea>
<textarea class="textarea-2" rows="4" cols="50">
test
</textarea>
</body>
<script type="text/javascript">
var textarea1 = $('.textarea-1');
var textarea2 = $('.textarea-2');
textarea1.keyup(function()
textarea2.val(textarea1.val());
);
textarea2.keyup(function()
textarea1.val(textarea2.val());
);
</script>
</html>
【讨论】：
完美只需要一个改变。按钮需要是静态的，当我再次单击它时，它需要隐藏第二个文本框.. 对不起，我不太明白你的意思 您希望第一个文本框复制第二个文本框的所有内容吗？或者你想看看第一个文本框之前和之后的区别？以上是关于使用 javascript 在 HTML 中弹出文本框的主要内容，如果未能解决你的问题，请参考以下文章