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>

问题是只显示直到第一个空格的文本，剩下的是截止的，所以＆＃34;这是一个例子＆＃34;将显示＆＃34;此＆＃34;在搜索栏中。如果我传递一个常规字符串而不是变量，那么它可以正常工作。

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

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

1 个答案: