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

Question

我制作了一个标签列表，该列表接受用户输入并将其作为标签列表绑定到另一个输入字段。然而，在用Javascript和JQuery弄乱了几个星期之后，我能够做到这一点的唯一方法(重要的是一种优雅的方式(是使用Brython。不幸的是，这似乎以某种方式禁用了 jinja2 模板，因此没有任何东西提交到数据库。所以，毕竟，我的问题是，这样一个看似简单的任务可以在 Flask 中原生完成吗？

以下是 Brython 脚本如何工作的本质 https://jsfiddle.net/5nt39deo/2/但问题所涉及的代码如下：

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

Answer 1

看看这个原生的JavaScript解决方案

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

<script type="text/javascript" id="script2">
function outputUpdate(e){
let currentText=document.getElementById('text').value;
document.getElementById('output').innerHTML = currentText;
</script>

https://jsfiddle.net/kalovelo/z5ngxp31/

Answer 2

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

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

这是Javascript：无需显式调用javascript函数，您只需将keyup事件附加到输入框中即可。你可以在这里查看这个 小提琴

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