輸入值屬性沒有在搜索欄上顯示全文

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呈現器都可以容忍未定義的屬性，並且標準覆蓋了無值屬性（因爲它是省略雙引號）。