如何从以编程方式设置的 textarea 更新输入答案

【问题标题】：How to update input from a programmatically set textarea如何从以编程方式设置的 textarea 更新输入
【发布时间】：2018-04-24 17:13:34
【问题描述】：

我有一个使用谷歌地图坐标设置的文本区域。当用户拖动地图时，坐标会自动更新。我正在尝试将每个更新推送到输入。

我有以下代码（它不会随着程序更新而更新，只有当用户自己更改文本字段并点击关闭时）

var newField = document.getElementById("input")

$('#textarea').change(function () {
  var $this = $(this);
  newField.value = $this.val();
});
$('#textarea').trigger('change');

如果有更好的方法来做到这一点，我不会嫁给某种方式甚至 jquery/js/ajax（如果可能/是最好的）

我希望能够实时反映程序化更新

任何帮助将不胜感激

谢谢

【问题讨论】：

您想监听 textarea 的变化，然后相应地更新输入吗？您想将输入与 textarea 的内容同步吗？
@AbdennourTOUMI 我是 js/jquery 的初学者，所以我愿意接受如何最好地完成它的想法。只要输入有实时更新，我就很高兴

标签： javascript jquery variables var

【解决方案1】：

我了解您希望将 input 的值与 input 的值同步。如果是这样，下面是一个依赖setInterval的解决方案：

setInterval(() => {
  document.getElementById('input').value = $('#textarea').val();
}, 2);

    setInterval(() => {
       
      document.getElementById('input').value = $('#textarea').val();
    }, 2);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>




<div>
  <h3>Write something in this textarea. It should be reflected in the Input bleow</h3>
  <textarea id="textarea" placeholder="This is textarea..." rows="4" cols="30">
  </textarea>

</div>

<div>
 <input id="input" placeholder="This is input..." type=text"/>
</div>

【讨论】：

我对此很感兴趣，但它返回未定义的 $('textarea').val() 部分。有没有其他方法可以去除 textarea 的内容？
如果您可以共享您的 HTML，那么我们会相应地提取选择器。实际上，我假设您输入的 ID 等于“#input”，而 ID 等于“#textarea”的 textarea。如果您没有相同的 ID，并且您正在尝试执行确切的解决方案，那肯定是行不通的。
var textArea = document.getElementById("gmap-macro_map-macrotext0") var newField = document.getElementById("edit-field-testjs-und-0-value") setInterval(() => { newField.value = $('gmap-macro_map-macrotext0').val(); }, 2); 以上是我的选择器和你为我的选择器修改的代码
我用newField.value = document.getElementById("gmap-macro_map-macrotext0").value;得到它谢谢！
欢迎@Bestinc！

【解决方案2】：

你可以使用inputjquery事件来绑定textarea的值变化：

$("textarea").on("input", function(){
  $("input").val($("textarea").val())
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<textarea></textarea>
<input type="text"/>

【讨论】：

不幸的是，它似乎不适用于实用设置的文本区域