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

Question

我正在使用 lightning-web-components.

实现这个

我正在使用 <div contenteditable> 对多行应用不同的样式。

这里，assetSerialNumber 和 assetLocation 在 js 的 connectedcallback() 方法中被填充。我在 class 中使用 divTextarea 来使 div 看起来像 textarea 这样工作正常。

.html file

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

.js file

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

场景 1： 如果我向 <div contenteditable> 下的任一 <p> 标签添加任何文本，handleChange 方法能够检索更新文本值。

场景 2： 如果我按 ENTER 并开始输入，我无法获得更新的文本。每次按下 ENTER 时，都会在 <div contenteditable> 下添加一个新的 <p> ，如下所示，并且 handleChange 方法仍然是 returns 原始文本`

<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>

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

Answer 1

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

获取更新的内容

html file

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

js file:

let divTextarea = this.template.querySelector('.divTextarea');
divTextarea.innerHTML = '<p>'+Device request:+' '+this.assetSerialNumber+'</p>'+'<p>'+Device location+' '+this.assetLocation+'</p>';

然后 onkeyup 事件将如下处理：

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

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

Not able to fetch updated content from div contenteditable on keyup event

html

javascript

web-component

salesforce-lightning