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

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>

问题是只显示第一个空白之前的文本，其余部分被 chop ，因此“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 渲染器都可以容忍未定义的属性，并且标准涵盖了无值属性(因为它省略了双引号)。