Svelte：可编辑内容和 onChange

Question

在 svelte 中，我知道可以使用

editablecontent

和

bind:innerHTML

将 div 的内容与变量绑定。但就我而言，我只想在 div 失去焦点时修改变量 (

on:blur

)。所以我尝试写这篇文章，受到我在

input

上所做的启发：

<script>
    let html = 'Write some text!';
</script>

If I change this:

<div innerHTML={html} on:blur={(e) => {html = e.target.innerHTML;}} contenteditable />

This one will not be updated, but ONLY after I click outside of the field (so bind:innerHTML is not what I want):

<div innerHTML={html} on:blur={(e) => {html = e.target.innerHTML;}} contenteditable />

{html}

<style>
    [contenteditable] {
        padding: 0.5em;
        border: 1px solid #eee;
        border-radius: 4px;
    }
</style>

但这失败了：变量在模糊时被修改，但如果变量从另一个字段更改，它不会更新其值。

知道我在这里做错了什么吗？

Answer 1

on:input={(e) => {html = e.target.innerHTML;}} ?

<div innerHTML={html}  on:input={(e) => {html = e.target.innerHTML;}}  contenteditable />