根据输入值（Azle）实时显示文本

Question

我有一个输入，供用户添加一些文本。我希望此文本显示在页面的另一部分，根据用户键入的内容（就像我输入此内容时Stack Overflow显示填充问题区域的文本一样）。

我知道我可以使用Azle的 as_change 事件选项在用户输入时捕获输入中的更改，但是它不能正确显示文本：

示例：

az.add_input('sections', 1, {
    "this_class" : "my_input",
    "placeholder" : "add text...",
    "spellcheck" : false
})

az.add_event('my_input', 1, {
   "type" : "as_change",
   "function" : `
       az.add_text('sections', 1, {
           "this_class" : "my_text",
           "text" : listen_for_value('my_input', 1)
       })
       az.all_style_text('my_text', {
           "color" : "white",
           "display" : "inline-block"
       })
       `
})

Answer 1

只需利用Azle的动态内容即可。在用户键入时动态删除并添加文本。使动态内容保持其自身功能：

function set_dynamic_text() {
    az.remove_element('my_text', 1)
    az.add_text('sections', 1, {
        "this_class" : "my_text",
        "text" : listen_for_value('my_input', 1)
    })
    az.all_style_text('my_text', {
        "color" : "white"
    })
}

添加将此功能附加到事件：

az.add_event('my_input', 1, {
   "type" : "as_change",
   "function" : "set_dynamic_text()"
})

很明显，您可以根据需要放置文本。