使用 javascript 在 HTML 中弹出文本框答案

【问题标题】：Popup text box in HTML with javascript使用 javascript 在 HTML 中弹出文本框
【发布时间】：2018-08-23 22:15:48
【问题描述】：

我需要设计一个文本框textbox

如上图。

它应该有两个文本框，如果我编辑一个，它应该反映在另一个文本框中（反之亦然）。

请帮我解决这个问题。

提前致谢

【问题讨论】：

嗨@don - 请提供您已经尝试使用的代码。
请显示你的css代码

标签： javascript html 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>

【讨论】：

完美只需要一个改变。按钮需要是静态的，当我再次单击它时，它需要隐藏第二个文本框..
对不起，我不太明白你的意思
您希望第一个文本框复制第二个文本框的所有内容吗？或者你想看看第一个文本框之前和之后的区别？