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

Question

我的代码是一个使用Flask（python）框架的web应用程序，我在HTML5上实现了这个搜索栏，我希望输入的搜索文字出现在页面加载;像这样（其中{{查询}}是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> 

的问题是，只有文本，直到第一个空格显示，剩下的就是截止，因此“这是一个例子“将在搜索栏中显示”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呈现器都可以容忍未定义的属性，并且标准覆盖了无值属性（因为它是省略双引号）。