顯示在搜索欄中搜索詞後提交

Question

這裏是我的代碼，我使用HTML5爲我的搜索邏輯：

<form style="padding-top: 15px; margin-bottom:-15px" onsubmit="location.href='/search/' + document.getElementById('userInput').value; return false;" /> 
    <input id="userInput" style="width:150px; padding: 5px; margin: 0 5px; font-size: 90%;" type="text" value="" onclick="this.value=''" /> 
    <input style="width:80px; height: 25px; font-size: 90%;" type="submit" value="Search" /> 
</form> 

我將如何顯示在該領域的用戶輸入的搜索值後提交？我覺得有一個HTML5標籤 - 但不確定...

Answer 1

沒有HTML5標籤，意思是「記住在提交表單之前輸入的內容」 - 這不是HTML元素的作用。

表單提交後，您將進入新頁面。你要麼重定向，要麼渲染一個頁面。因此，要在表單中顯示搜索詞，無論使用何種方法，您都需要在呈現結果頁時將該詞置於搜索字段的value屬性中。

我不知道你正在使用的服務器端技術，所以我不能很具體，但一般：

<input ... value="[IF length($searchValue) > 0 THEN print $searchValue]" ... />

此外，您使用的是直列onclick事件將字段的值設置爲空字符串 - 即使您成功地將值傳遞過來，只要用戶將注意力集中在輸入上，將清除攜帶的值;你可能想重新考慮這一點的JavaScript。