使用javascript在HTML中弹出文本框

时间:2018-03-15 07:31:03

标签: javascript html css

我需要设计一个文本框textbox

如上图所示。

它应该有两个文本框,如果我编辑一个它应该反映在另一个(反之亦然)。

请帮助我。

提前致谢

3 个答案:

答案 0 :(得分:1)

这是否符合您的要求?



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()">
&#13;
&#13;
&#13;

答案 1 :(得分:0)

这是你想要的吗?

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 :(得分:0)

每次编辑完文本区域后, @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>