单击重置后将占位符值恢复到搜索框

Question

我正在编辑一些 javascript，它有一个带有变量的搜索框，如下所示

var secondSearchTerm = $('#2nd-search').val();

在 HTML 代码中 '2nd-search' 有一个占位符 'Enter search term'

我还有一个清除搜索的重置按钮，如下所示：

 $("#2nd-reset-btn").on("click", function () {
   return myNetwork.resetSecondSearch();
 })

我想要做的是在单击重置时让搜索框重新填充占位符。现在最后输入的字词保留在搜索框中。

关于如何编辑代码来执行此操作的任何想法？

非常感谢！

Answer 1

您需要做的就是将值设置为空白并将焦点从输入中移开（因为某些浏览器会隐藏焦点上的占位符）。占位符将再次可见。请尝试以下操作：

$("#2nd-reset-btn").on("click", function () {
   secondSearchTerm.blur();
   return secondSearchTerm.val('');
 })

Answer 2

只用纯 JS 就可以做到

给定初值

function reset() {
  var initialValue = 'Enter your search term.';
  var query = document.getElementById('myquery');

  query.value = initialValue;
}

<input type="text" id="myquery" />
<input type="button" id="reset" onclick="reset()" value="Reset" />

给定占位符

function reset() {
  var query = document.getElementById('myquery');
  query.value = '';
}

HTML

<input type="text" id="myquery" />
<input type="button" id="reset" onclick="reset()" value="Reset" />

Answer 3

js

// Add your javascript here
$(function(){

$("#reset").on("click", function () {     
   return $('#username').val('');
 });

});

html

<input type="text" name="name"  id = "username" placeholder="uname"/>
<button id="reset">Reset </button>

Restoring placeholder value to a search box after reset has been clicked