将可点击按钮添加到输入而不“聚焦”输入
Posted
技术标签:
【中文标题】将可点击按钮添加到输入而不“聚焦”输入【英文标题】：Adding a clickable button to an input without "unfocusing" the input 【发布时间】：2014-09-08 17:57:50 【问题描述】：所以我用一些很棒的图标构建了一个整洁的小标题。
为了让用户更改搜索功能的输入类型，我正在尝试通过以下方式做到这一点：
(1)点击放大镜图标打开搜索栏进行输入（搜索栏使用:focus扩展）
(2) 输入单词后，用户会再次选择放大镜（位于搜索栏的末尾）。
(3) 这扩展了表示输入类型的其他图标列表（即音频文件的音符）。
(4)一旦选择了一个图标，它将替换放大镜图标并提交。 [这部分我是用 javascript 做的，所以没什么大不了的。]
最大的问题是单击图标时搜索栏不会保持焦点，我什至不确定是否可以单击该图标。感谢您提供任何和所有帮助。
这是我的 html：
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="icomoon/style.css">
<title>outline</title>
</head>
<body>
<header class="header">
<ul class="navigation-bar">
<li class="nav-list">
<div class="nav-item" id="search">
<label class="search-label">
<input class="search-button"><span class="icon-search" id="icon-search-span-2"></span></input>
<button class="search-type"><span class="icon-search" id="icon-search-span"></span></button></label>
</div>
</li>
<li class="nav-list"><div class="nav-item" id="login"><button class="login-button"><span class="icon-user3"></span></button></div></li>
<li class="nav-list"><div class="nav-item" id="options"><button class="options-button"><span class="icon-menu2"></span></button></div></li>
</ul>
</header>
</body>
</html>
还有我的 CSS：
html
background-image: url("http://www.htmlhive.com/wp-content/uploads/2012/02/bluestripes.png");
container
width:100%
body
margin: 0 0 0 0;
margin-top: 10px;
width: 100%;
.header
background-color:#0099CC;
width:100%;
height:50px;
.navigation-bar
display:table;
list-style-type: none;
margin-top:0;
margin-left:auto;
margin-right:auto;
padding: 0;
width:700px;
.nav-item
font-weight:bold;
color: #FFFFFF;
background-color:transparent;
display: inline;
text-align:left;
padding:4px;
text-decoration: none;
text-transform: uppercase;
.nav-list
display:table-cell;
height:30px;
#search
display:table-cell;
height:30px;
width:375px;
padding-right:10px;
#login
display:table-cell;
height:30px;
width:175px;
#options
display:table-cell;
height:30px;
width:75px;
@media (max-width:700px)
.header
height:120px;
.nav-list
display:inline-block;
vertical-align: middle;
#search
text-align: left;
width:645px;
padding-top:10px;
#login
display:inline-block;
padding-top: 22px;
padding-bottom: 35px;
margin-top:35px;
height:0px;
width:485px;
text-align: center;
#options
display:inline-block;
height:0px;
padding-top: 22px;
padding-bottom: 35px;
margin-top:35px;
width:152px;
text-align: center;
.options-button
margin-top:-20px;
.search-button
margin-left:60px;
margin-top:3px;
transition:all .8s;
.search-button:focus
text-align: left;
padding-left:20px;
padding-right:40px;
width:465px;
#icon-search-span-2 ~ .search-button
text-align: left;
padding-left:20px;
padding-right:40px;
width:465px;
.search-button:focus ~ .search-type
margin-left:545px;
.search-button:focus ~ #icon-search-span-2
color:transparent;
.login-button
margin-top:-20px;
margin-right:325px;
#icon-search-span
padding:40px;
line-height:17px;
margin-left:0px;
margin-top:0px;
.options-button
background-color: transparent;
border: 2px solid #FFFFFF;
border-radius:25px;
color:#FFFFFF;
font-size:20px;
padding:5px;
width:40px;
vertical-align: middle;
.search-button
background-color: transparent;
border: 2px solid #FFFFFF;
border-radius:25px;
color:#FFFFFF;
font-size:20px;
margin-left:55px;
padding:5px;
width:26px;
vertical-align: middle;
transition:all .8s;
@media (min-width:700px)
#search
position:relative;
top:0px;
.search-button:focus
text-align:left;
padding-left:20px;
padding-right:40px;
width:600px;
.search-button:focus ~ .search-type
margin-top:-41px;
margin-left:680px;
transition:all .8s;
.search-button:focus ~ #icon-search-span-2
color:transparent;
#login
position:absolute;
vertical-align: middle;
margin-left:40px;
#options
position:absolute;
vertical-align: middle;
margin-left:90px;
.search-button:focus ~ #login
.login-button
background-color: transparent;
border: 2px solid #FFFFFF;
border-radius:25px;
color:#FFFFFF;
font-size:20px;
padding:5px;
width:40px;
vertical-align: middle;
#icon-search-span
padding:7px;
line-height:17px;
margin-left:-5px;
margin-top:-15px;
vertical-align: middle;
.search-label
position:absolute;
margin-left:5px;
.search-type
position:absolute;
background-color: transparent;
border-radius:25px;
color:#FFFFFF;
font-size:20px;
margin-top:-41px;
border:2px transparent;
margin-left:-9999px;
pointer-events: none;
padding: 5px;
height:38px;
width:38px;
vertical-align: middle;
z-index: 100;
transition:all .8s;
#icon-search-span-2
position: absolute;
font-size:20px;
margin-left:-30px;
margin-top:12px;
transition:all .2s;
【问题讨论】：
【参考方案1】：点击某物会将焦点从某物上移开 - 设计使然。您可以随时使用JavaScript将焦点设置回输入时的选择。
您可能希望使用类名并使用 JavaScript 而不是 :focus 伪类来控制它。使用 jQuery 确实让你的 JavaScript 更容易。
CSS：
.search-button.focus
text-align:left;
padding-left:20px;
padding-right:40px;
width:600px;
JS：
$('.search-button').on('click', function()
$(this).addClass('focus');
)
【讨论】：
所以构建一个 JavaScript 函数来响应按钮的“onclick”并使搜索栏保持不变：focus？有什么办法可以针对多种屏幕尺寸做到这一点？ 是的，你知道 JavaScript 吗？ 显然不够大声笑。 “if-else”有一个内置函数，允许您将屏幕尺寸用作变量？我假设类似的东西会包含在 jQuery 库或其他东西中...... 所以我尝试了这样的事情： JavaScriptfunction Focus(toFocus) document.getElementById(toFocus).focus(); HTML <button class="search-type" onclick="Focus('search-button')"></button> 但它不起作用......也许是按钮本身是问题吗？
好的，我已经运行了你的代码。您要做的是在焦点上添加一个类名，而不是使用 :focus 伪类，因此单击时将该样式更改为.focus 而不是:focus。我将在问题中添加一些代码来澄清这一点。以上是关于将可点击按钮添加到输入而不“聚焦”输入的主要内容，如果未能解决你的问题，请参考以下文章