Javascript 无法从div contenteditable on keyup事件中获取更新的内容

我正在使用

lightning web组件

实现此功能

我正在使用

对多行应用不同的样式

这里，

assetSerialNumber

和

assetLocation

在js中的

connectedcallback（）

方法中填充。 我在课堂上使用

divTextarea

使

div

看起来像

textarea

，效果很好

.html文件

<div id="divcontenteditable" class="divTextarea slds-textarea" contenteditable onkeyup={handleChange}> 
   <p>Device request:  {assetSerialNumber}</p>
   <p>Device location {assetLocation}</p>
</div>

handleChange(event) {
        var input = this.template.querySelector(".divTextarea");
        console.log(input.innerText);
        console.log(input.textContent);
    }

<div id="divcontenteditable" class="divTextarea slds-textarea" contenteditable 
onkeyup={handleChange} lwc:dom="manual"></div>

场景1:如果我在

下的

标记中添加任何文本，

handleChange

方法能够检索更新的文本值

场景2:如果我按

ENTER

并开始键入，我无法获取更新的文本。每次按下

ENTER

，都会在

下添加一个新的

，如下所示，

handleChange

方法仍然返回原始文本`

<div id="divcontenteditable" class="divTextarea slds-textarea" contenteditable onkeyup={handleChange}> 
       <p>Device request:  {assetSerialNumber}</p>
       <p>Device location {assetLocation}</p>
       <p>New text</p>
 </div>

设备请求：{assetSerialNumber}

设备位置{assetLocation}

新文本

---

如何实现场景2，即在新行中添加文本时获取更新内容。

我能够通过以下方法从div获取更新内容。我从html文件中删除了默认文本，并在js文件的innerHTML中添加了这些文本。然后我可以从input.textContent获取更新的内容

html文件

<div id="divcontenteditable" class="divTextarea slds-textarea" contenteditable onkeyup={handleChange}> 
   <p>Device request:  {assetSerialNumber}</p>
   <p>Device location {assetLocation}</p>
</div>

handleChange(event) {
        var input = this.template.querySelector(".divTextarea");
        console.log(input.innerText);
        console.log(input.textContent);
    }

<div id="divcontenteditable" class="divTextarea slds-textarea" contenteditable 
onkeyup={handleChange} lwc:dom="manual"></div>

然后onkeyup事件将按如下方式处理：

handleChange(event) {
   var input = this.template.querySelector(".divTextarea");
   console.log(input.textContent);
}

---

嗨，你的问题是什么？你想达到什么目标？您可以编辑您的问题。您好，我正在尝试解决方案2中的问题。我更新了问题以反映这一点。