Javascript 如何将文本输入绑定到同一html页面上的另一个div

我制作了一个标签列表，它接受用户输入，并将其作为标签列表绑定到另一个输入字段。然而，在花了几个星期的时间处理Javascript和JQuery之后，我能够做到这一点的唯一方法（重要的是一种优雅的方法）就是使用Brython。不幸的是，这似乎以某种方式禁用了jinja2模板，因此不会向数据库提交任何内容。所以，在所有这些之后，我的问题是，这样一个看似简单的任务能在烧瓶中自然完成吗

下面是Brython脚本工作原理的要点，但问题涉及的代码如下：

<form action="" id="homeForm" class="centered" role="form" method="post">
    {{ form1.hidden_tag() }}
    {{ form1.toppings(type="text",id="homeInput",autocomplete="off",list="topps",placeholder="Toppings...") }}
    <datalist id="topps">{% for top in topps %}<option value="{{ sym }}">{% endfor %}</datalist>
    <button action="" type="submit" id="homeAddTags" class="button">Add</button><br><br>
    {{ form1.tags(id="tagList") }}<br>
    {{ form1.agree(id="homeAgreement") }}
    {{ form1.agree.label() }}<br><br>
    <button type="reset" id="homeResetTags" class="button">Reset</button>
    {{ form1.sendtags(type="submit",class_="button",id="homeSubmit") }}<br><br>
</form>


<script type="text/python" id="script1">
    from browser import document, html, window, console, alert

    storage = []

    def addTag(e):
        item = document['homeInput'].value
        if item not in storage and item != '':
            storage.append(item)
            document['homeInput'].value = ''
            document['tagList'].textContent = storage
        else:
            alert('Tag already added.')
            document['homeInput'].value = ''

    def resetTags(e):
        storage = []
        document['homeInput'].value = ''
        document['tagList'].textContent = storage

    document['homeAddTags'].bind('click', addTag)
    document['homeResetTags'].bind('click', resetTags)
</script>

{{form1.hidden_tag（）}}
{{form1.toppings（type=“text”，id=“homeInput”，autocomplete=“off”，list=“topps”，placeholder=“toppings…”）}
{%topps%}{%endfor%}
添加


{{form1.tags（id=“tagList”）}}

{{form1.agree（id=“homeAgreement”）}
{{form1.agree.label（）}


重置
{{form1.sendtags（type=“submit”，class=“button”，id=“homeSubmit”）}


从浏览器导入文档、html、窗口、控制台、警报
存储=[]
def添加标签（e）：
item=文档['homeInput']。值
如果项目不在仓库中，且项目！=''：
存储。追加（项）
文档['homeInput']。值=''
文档['tagList'].textContent=存储
其他：
警报（'已添加标记'）
文档['homeInput']。值=''
def重置标签（e）：
存储=[]
文档['homeInput']。值=''
文档['tagList'].textContent=存储
文档['homeAddTags'].绑定（'单击'，添加标记）
文档['homeResetTags']。绑定（'click'，resetTags'）

查看本机javascript解决方案

...
 <input type="text" id="text" placeholder="Enter something" oninput="outputUpdate();">
...

。。。
...

函数输出更新（e）{
让currentText=document.getElementById（'text'）.value；
document.getElementById（'output'）。innerHTML=currentText；

---

您可以尝试我在下面解释的方法

<input type="text">
<div id="output"></div>

---

这很好，谢谢。我想知道是否有一种方法可以在Flask中避免JavaScript？嗨，为了使用更少的代码，可以添加

This.value

作为

outputUpdate（）

的参数，比如：

oninput=“outputUpdate（This.value）；”

。然后可以传递set

document.getElementById（'output'））.innerHTML

直接输入到

e

，直接输入值。因此跳过这一行：

让currentText=…

！你能告诉我们你不工作的烧瓶尝试吗？@DanieleRicci我无法修改jinja2模板，但我已经在上面添加了表单代码。你说你正在寻找一个本地烧瓶解决方案tion，你是说brython也足够了？还是希望在每次“oninput”事件后再次呈现页面？@Chiel brython工作正常，但似乎禁用了“标记列表”以一种我不太理解的方式输入，所以我试图摆脱它，以简化我的代码，并希望解决标记列表问题。@JackPutter那么，如果有人提出了Kalovelo答案的python版本，这个问题会得到回答吗？如果没有，你能进一步澄清这个问题吗？

<input type="text">
<div id="output"></div>

<script type="text/javascript">
var $onKeyUpEvent = document.getElementsByTagName('input')[0];
$onKeyUpEvent.addEventListener('keyup', (v) => {
    document.getElementById('output').innerHTML = v.target.value;
})
</script>