问题与输入按钮 [英] issue with input button
本文介绍了问题与输入按钮的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我有这个搜索按钮，打开一个顶部条屏幕宽度小于1080像素，但我有一个问题，在移动与它...触摸移动的按钮，它不出现在这里的酒吧你有一个例子< a href =http://cosmoscreativeagency.com/alanic/index.html =nofollow noreferrer> http://cosmoscreativeagency.com/alanic/index.html
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
这是功能：
- 在屏幕上> 1080px：白线出现点击搜索按钮
-
- 在屏幕上< = 1080px：白色顶部搜索栏出现，点击搜索按钮，白线设置为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>
推荐答案
我不知道这是否适合你，但这里是：
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>
这篇关于问题与输入按钮的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
