带有自动隐藏和显示的清除按钮的文本输入

Question

我在一个网站上工作，我使用了一个搜索框，在该搜索输入字段中我想设置一个重置按钮“X”

因此，当搜索框输入字段为空时，它不会显示“X”。但是当用户在字段中输入任何内容时，“X”会自动出现。

再一次，当用户点击“X”时，它会清除所有输入的数据并仍然专注于输入字段？

到目前为止，我已经做到了

只有 JAVASCRIPT 代码我不使用 jQuery！

var searchSminput = document.getElementById("offcansearch").value.length;

if (searchSminput == 0) {
document.getElementById("resetb").style.display = "none";
} else {
document.getElementById("resetb").style.display = "block";
}

	#resetb {
		
		background-image: url(http://cdn.onlinewebfonts.com/svg/img_286433.svg);
		background-repeat: no-repeat;
		background-size: 22px 42px;
		cursor: pointer;
		display: block;
		transition: all 300ms ease;
		width: 22px;
		height: 42px;
		border: none;
		background-color: transparent;
		outline: none;
		right: 10px;
		top: 5px;
		position: absolute;
		margin: 0;
		padding: 0;
	}	
  #offcansearch {
  width: 100%;
  height: 30px;
  }

<form>
<input id="offcansearch" type="text" name="search" placeholder="Search">
<button id="resetb" type="reset"></button>
</form>

Answer 1

向输入添加更改事件：

document.getElementById('offcansearch').addEventListener('change', function() { ... }

还添加到重置按钮（点击隐藏按钮）：

resetb.addEventListener('click', function() {
  resetb.style.display = "none";
});

var resetb =  document.getElementById("resetb");
var offcansearch = document.getElementById('offcansearch');

offcansearch.addEventListener('keyup', function() {
  var searchSminput = offcansearch.value.length;
  if (searchSminput == 0) {
    resetb.style.display = "none";
  } else {
    resetb.style.display = "block";
  }
});

resetb.addEventListener('click', function() {
  resetb.style.display = "none";
  offcansearch.focus();
});

#resetb {
  background-image: url(http://cdn.onlinewebfonts.com/svg/img_286433.svg);
  background-repeat: no-repeat;
  background-size: 22px 42px;
  cursor: pointer;
  display: none;
  transition: all 300ms ease;
  width: 22px;
  height: 42px;
  border: none;
  background-color: transparent;
  outline: none;
  right: 10px;
  top: 5px;
  position: absolute;
  margin: 0;
  padding: 0;
}

#offcansearch {
  width: 100%;
  height: 30px;
}

<form>
  <input id="offcansearch" type="text" name="search" placeholder="Search">
  <button id="resetb" type="reset"></button>
</form>