4

我制作了一个标签列表，它接受用户输入并将其作为标签列表绑定到另一个输入字段。然而，在使用 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>
4

2 回答 2

3

看看这个原生 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/

于 2020-06-13T21:40:45.240 回答
2

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

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

这是 Javascript：您可以简单地将keyup事件附加到输入框，而不是显式调用 javascript 函数。你可以在这里查看Fiddle

<script type="text/javascript">
var $onKeyUpEvent = document.getElementsByTagName('input')[0];
$onKeyUpEvent.addEventListener('keyup', (v) => {
    document.getElementById('output').innerHTML = v.target.value;
})
</script>
于 2020-06-22T06:41:21.250 回答