单击重置后将占位符值还原到搜索框

Question

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

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

在HTML代码"第二搜索"中有一个占位符"输入搜索词"

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

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

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

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

非常感谢！

Answer 1

嗨，

请参阅此链接 https://plnkr.co/edit/EtLmby5BdD5Yn70EIBRD?p=preview

.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>

Answer 2

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

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

Answer 3

你可以只用纯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" />