输入值属性未在搜索栏上显示全文

Question

我的代码是一个使用 Flask (python) 框架的 Web 应用程序，我在 HTML5 上实现了这个搜索栏，我希望输入的搜索文本显示在搜索栏之后页面加载；像这样（其中 {{query}} 是 Jinja2 传递的变量）：

    <form class="search-bar search_header" method="GET" action="/">
    <input class="search_input" name="q" tabindex="1" type="text" value={{query}}>
    <button class="search_button" tabindex="2" type="submit">
        <i class="icon-search"></i>
    </button>
</form>

问题是只显示第一个白色 space 之前的文本，其余部分被截断，因此 "This is an example" 将在搜索栏中显示 "This"。如果我传递一个常规字符串而不是变量，那么它就可以正常工作。

{{query}} 是 unicode 类型，如果这很重要，我已经尝试用多种方式对其进行格式化都无济于事，有什么解决方法吗？

我也考虑过将着陆页搜索栏 html 中的变量保存为 Javascript，但我是 Javascript 的新手，如有任何建议，我们将不胜感激！

Answer 1

我希望你必须将占位符用双引号引起来：

<input class="search_input" name="q" tabindex="1" type="text" value="{{query}}">

否则替换的 html 代码将是

<input class="search_input" name="q" tabindex="1" type="text" value=text with whitespace>

普通的 html 渲染器会将其解析为具有属性 value、with 和 whitespace 的输入元素，后两者没有值，而 value 的值为 text。请注意，大多数 html 渲染器可以容忍未定义的属性，并且标准涵盖了无值属性（因为它省略了双引号）。

输入值属性未在搜索栏上显示全文

Input value attribute not showing full text on search bar

html

javascript

jinja2

flask