javascript - 输入键问题

Question

我有这个搜索按钮，可以在屏幕宽度小于 1080 像素的情况下打开顶部栏，但我在移动设备上遇到问题...触摸移动设备上的按钮，它没有出现在此处的栏你有一个例子 http://cosmoscreativeagency.com/alanic/index.html

这是功能:

• 在屏幕上> 1080px:点击搜索按钮出现白线
• 在屏幕 <= 1080px 上:点击搜索按钮出现白色顶部搜索栏，白线设置为显示:无

下面的片段:

toggle();
window.onresize = function() {
    toggle();
}
function toggle() {
	var searchTop = document.getElementById('demo-1');	
	if (window.innerWidth <= 1080) {
		
		document.getElementById('demo-2').addEventListener('click', function(evt) {
		    
		    document.getElementById('demo-1').style.top = '0px';
		}, true);

		document.getElementById('demo-3').addEventListener('blur', function(evt) {
            document.getElementById('demo-1').style.top = '-60px';
		}, true);

	} else if (window.innerWidth > 1080) {
		document.getElementById('demo-1').style.display = 'none';
	}

}

body {
background-color: black;
}
#demo-1 {
  position: absolute;
  width: 100%;
  height: 60px;
  z-index: 300;
  transition: all 0.5s ease;
  top: -60px; }
#demo-1 input[type="search"] {
  background-color: #ffffff;
  padding-left: 50px;
  padding-right: 40px;
  width: 100%;
  height: 60px;
  color: #000000;
  border: none;
  opacity: 0.9;}
.subheader {
  position: absolute;
  top: 120px;
  width: 100%; }
#demo-2 {
  position: relative;
  display: inline-block;
  padding-right: 50px;
  float: right;
  z-index: 300; }
#demo-2 input[type="search"] {
  background: url(http://localhost/alanic/images/searchbutton.png) no-repeat 9px center;
  padding-right: 20px;
  padding-bottom: 5px;
  padding-left: 10px;
  -webkit-appearance: textfield;
  -webkit-box-sizing: content-box;
  width: 20px;
  cursor: pointer;
  border: none;
  transition: all 0.5s; }
#demo-2 input[type="search"]:hover {
  background-color: none; }
#demo-2 input[type="search"]:focus {
  width: 200px;
  padding-left: 40px;
  background-color: none;
  border-bottom: 1px solid #fff;
  color: #fff;
  cursor: auto; }
@media screen and (max-width: 1080px) {
 #demo-2 input[type="search"]:focus {
    display: none; } }
 #demo-2 input:-moz-placeholder {
  color: transparent; }
 #demo-2 input::-webkit-input-placeholder {
  color: transparent; }
 #demo-2 input:focus::-webkit-input-placeholder {
  color: #fff; }

<form id="demo-1">
  <input id="demo-3" type="search" name="buscar" placeholder="Search">
</form>			
<div class="subheader">
  <form id="demo-2">
    <input type="search" name="search" placeholder="Search">
  </form>
</div>

Answer 1

实际上，当您点击输入按钮时，它会返回空白的target.id，因为它没有id，但是当您单击表单(就在按钮附近)它将显示正确的 ID。 所以你可以做的是使用 currentTarget.id 或 this.id

查看target 和currentTarget 的区别:What is the exact difference between currentTarget property and target property in javascript

在整页中检查以下代码段。

toggle();
window.onresize = function() {
    toggle();
}
function toggle() {
	var searchTop = document.getElementById('demo-1');	
	if (window.innerWidth <= 1080) {
		
		document.getElementById('demo-2').addEventListener('click', function(evt) {
		  var target = evt.target;
          console.log("target = "+evt.target.id)
          console.log("currentTarget ="+evt.currentTarget.id)
		  if (this.id === 'demo-2') {
		    document.getElementById('demo-1').style.display = 'inherit';
		  }
		}, true);

	} else if (window.innerWidth > 1080) {
		document.getElementById('demo-1').style.display = 'none';
	}

}

<form id="demo-1">
	<input type="search" name="buscar" placeholder="Search">
</form>
<form id="demo-2">
  <input type="submit" name="search" placeholder="Search">
</form>