如何输入文本区域并将文本添加到内容可编辑的div中？

问题描述

我的页面上有一个<div contenteditable="true">和一个<textarea>。我需要获取要在div中显示的textarea中键入的文本，同时保留已经在div中的文本。我已经通过在keyup上使用textarea函数来实现这一点，但是它不能正常工作。我认为问题一定是每个contenteditable都更新了keyup文本变量。我尝试更改value1的范围，改为将其设置为全局变量，但仍然无法正常工作。有帮助吗？

这是我的代码：

JSFiddle

$(".secondary").keyup(function () {
  var value1 = $(".original").html();
  var value2 = $(".secondary").val();
  $(".original").html(value1 + value2);
});

div {
  width: 300px;
  height: 100px;
  border: solid 1px #000;
  overflow-y: scroll;
}

textarea {
  width: 300px;
  height: 100px;
  border: solid 1px #000;
  resize: none;
  overflow-y: scroll;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<p>Content Editable:</p>
<div class="original" contenteditable></div>

<br><br>

<p>Text Area:</p>
<textarea class="secondary"></textarea>

因此，如果您在contenteditable中键入“ Foo”，在textarea中键入“ bar”，则contenteditable中的文本应为“ foobar”。

此外，如果contenteditable中的最后一个字符是空格，则在textarea中键入将向<br>添加contenteditable。有办法解决这个问题吗？

解决方法

更好地使用change事件而不是keyup：

$(".secondary").change(function () {
    var value1 = $(".original").html();
    var value2 = $(".secondary").val();
    $(".original").html(value1 + value2);
    /*Reset text area*/
    $(".secondary").val('');
});

,

我宁愿使用keyup事件处理程序，也不使用input。试用代码段：

$(".secondary").on('input',function(event) {
  var val = $('.original').text();
  $('.original').text(val + event.originalEvent.data);
});

div {
  width: 300px;
  height: 100px;
  border: solid 1px #000;
  overflow-y: scroll;
}

textarea {
  width: 300px;
  height: 100px;
  border: solid 1px #000;
  resize: none;
  overflow-y: scroll;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<p>Content Editable:</p>
<div class="original" contenteditable></div>

<br><br>

<p>Text Area:</p>
<textarea class="secondary"></textarea>