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

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>

问题是只显示第一个空格之前的文本，其余部分被截断，所以“这是一个例子”将在搜索栏中显示“这个”。如果我传递一个常规字符串而不是变量，那么它工作正常。

{{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后两者没有值而 whilevalue的值为text。请注意，大多数 html 渲染器都可以容忍未定义的属性，并且标准涵盖了无值属性（因为它省略了双引号）。