输入按钮问题

Question

我有一个搜索按钮，打开屏幕宽度小于1080 it的顶部栏，但我在移动上遇到了问题。触摸手机上的按钮，它不会出现在这里你有一个例子http://cosmoscreativeagency.com/alanic/index.html

这是一个功能：

• 屏幕上>1080 on :白线显示在搜索按钮上
• 屏幕上<= 1080 as :显示白色顶部搜索栏，单击搜索按钮，白线设置为display: none

下面的片段：

​

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

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

查看target和currentTarget：javascript中的currentTarget属性和目标属性的确切区别是什么？之间的区别

在完整的页面中检查下面的片段。

​

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>

​

Answer 2

我不知道这对你有用吗，但这是：

​

// external.js
//<![CDATA[
var pre = onload, doc, bod, htm, E; // change var pre if using technique on more that this page
onload = function(){
if(pre)pre(); // handle previous onload

doc = document; bod = doc.body; htm = doc.documentElement;
E = function(id){
  return doc.getElementById(id);
}
var out = E('output'), ipt = E('input');
function solution(){
  var iS = ipt.style, oS = out.style;
  if(innerWidth < 1081){
    iS.display = 'inline-block'; oS.display = 'block';
    out.innerHTML = ipt.value;
  }
  else{
    iS.display = oS.display = 'none';
  }
}
onresize = ipt.onblur = E('btn').onclick = solution;
doc.forms[0].onsubmit = function(){
  return false;
}

}
//]]>

/* external.css */
#output,#input{
  display:none;
}

<!DOCTYPE html>
<html xmlns='http://www.w3.org/1999/xhtml' xml:lang='en' lang='en'>
  <head>
    <meta http-equiv='content-type' content='text/html;charset=utf-8' />
    <link type='text/css' rel='stylesheet' href='external.css' />
    <script type='text/javascript' src='external.js'></script>
  </head>
<body>
  <form method='post' action='#' name='form'>
    <input type='text' id='input' placeholder='search' />
    <input type='button' id='btn' value='Search' />
    <div id='output'></div>
  </form>
</body>
</html>

​

Answer 3

这就是我要找的，但还是有个问题.当我单击屏幕上小于1080 to的submit按钮时，它会显示搜索输入，就像我正在寻找的一样，没关系，但是当我将屏幕调整到超过1080 to (没有刷新代码)并且再次单击submit按钮时，它会显示输入搜索，即使代码在window.innerWidth >1080上显示没有输入.

我的问题是，如何返回显示:当屏幕上的屏幕小于1080 My时，屏幕上没有一个超过1080 My？

​

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.display = 'inherit';
		}, false);

		document.getElementById('demo-3').addEventListener('blur', function(evt) {
		    
            document.getElementById('demo-1').style.display = 'none';
		}, false);

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

}

#demo-1 { 
  display: none;
}

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

​