问题
I have this search button that open a top bar on screen width less than 1080px but I have a problem on mobile with it... touching the button on mobile, the bar it doesn't appear here you have an example http://cosmoscreativeagency.com/alanic/index.html
this is the functionality:
- on screen > 1080px: the white line appears clicking on the search button
- on screen <= 1080px: the white top search bar appears clicking on the search button and the white line is set as display: none
snippet below:
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>回答1:
Actually when you click on the input button it returns the target.id as blank because it doesn't have id but when you click on form(just near to button) it will display proper id.
So what you can do is use currentTarget.id or this.id
See the difference between target and currentTarget: What is the exact difference between currentTarget property and target property in javascript
Check the below snippet in full page.
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>回答2:
I don't know if this works for you, but here it is:
// 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>回答3:
This is what I was looking for, but there is still an issue... when I click on the submit button on screen less than 1080px it shows the search input like what I was looking for, that's ok, but when I resize the screen to more than 1080px (without refreshing the code) and I click on the submit button again it shows the input search even when the code says on window.innerWidth > 1080 to display none the input...
My question is, how do I return display:none on screen more than 1080px when I had the screen on less than that?
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>回答4:
You should insert the conditionals inside the click functions. I recommend you check CSS media queries to assign certain styles depending on the screen size.
window.onresize = function() {
if (window.innerWidth > 1080) {
document.getElementById('demo-1').style.display = 'none';
}
}
var searchTop = document.getElementById('demo-1');
document.getElementById('demo-2').addEventListener('click', function(evt) {
if (window.innerWidth <= 1080) {
document.getElementById('demo-1').style.display = 'inherit';
}
}, false);
document.getElementById('demo-3').addEventListener('blur', function(evt) {
if (window.innerWidth <= 1080) {
document.getElementById('demo-1').style.display = 'none';
}
}, false);#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>来源：https://stackoverflow.com/questions/41558976/issue-with-input-button