如何在我的HTML文本输入框中放置一个清晰的按钮,就像iPhone一样？
Hug*_*nan 116 html javascript css iphone
我想要一个漂亮的小图标,点击它会清除<INPUT>框中的文字.
这是为了节省空间,而不是在输入框外部有清晰的链接.
我的CSS技能很弱......下面是iPhone的外观截图.
Nic*_*ing 132
现在使用HTML5,它非常简单:
<input type="search" placeholder="Search..."/>
默认情况下,大多数现代浏览器会自动在字段中呈现可用的清除按钮.
(如果使用Bootstrap,则必须向css文件添加覆盖以使其显示)
input[type=search]::-webkit-search-cancel-button {
-webkit-appearance: searchfield-cancel-button;
}
Safari/WebKit浏览器在使用时也可以提供额外的功能type="search",例如results=5和autosave="...",但它们也会覆盖您的许多样式(例如高度,边框).为了防止这些覆盖,同时仍保留X按钮等功能,您可以将其添加到您的css:
input[type=search] {
-webkit-appearance: none;
}
有关所提供功能的更多信息,请访问css-tricks.comtype="search".
- 出色的答案，不涉及任何代码。不幸的是，许多浏览器都不支持。。没关系，这将是我产品中的Chrome附加功能：） (3认同)
- @Justin我相信tailwind在多个级别上禁用了webkit样式，所以你可能必须强制：`input[type=search] {-webkit-appearance: searchfield !important;}``input[type=search]::-webkit -search-cancel-button {-webkit-appearance: searchfield-cancel-button !important;}` (3认同)
Bal*_*usC 91
@thebluefox总结了最重要的一点.您还被迫使用JavaScript来使该按钮无论如何都能正常工作.这是一个SSCCE,你可以复制'n'paste'n'run它:
<!DOCTYPE html>
<html lang="en">
<head>
<title>SO question 2803532</title>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script>
$(document).ready(function() {
$('input.deletable').wrap('<span class="deleteicon" />').after($('<span/>').click(function() {
$(this).prev('input').val('').trigger('change').focus();
}));
});
</script>
<style>
span.deleteicon {
position: relative;
}
span.deleteicon span {
position: absolute;
display: block;
top: 5px;
right: 0px;
width: 16px;
height: 16px;
background: url('http://cdn.sstatic.net/stackoverflow/img/sprites.png?v=4') 0 -690px;
cursor: pointer;
}
span.deleteicon input {
padding-right: 16px;
box-sizing: border-box;
}
</style>
</head>
<body>
<input type="text" class="deletable">
</body>
</html>
顺便说一句,jQuery并不是必需的,它只是很好地将渐进增强所需的逻辑与源分开,你当然也可以继续使用纯 HTML/CSS/JS:
<!DOCTYPE html>
<html lang="en">
<head>
<title>SO question 2803532, with "plain" HTML/CSS/JS</title>
<style>
span.deleteicon {
position: relative;
}
span.deleteicon span {
position: absolute;
display: block;
top: 5px;
right: 0px;
width: 16px;
height: 16px;
background: url('http://cdn.sstatic.net/stackoverflow/img/sprites.png?v=4') 0 -690px;
cursor: pointer;
}
span.deleteicon input {
padding-right: 16px;
box-sizing: border-box;
}
</style>
</head>
<body>
<span class="deleteicon">
<input type="text">
<span onclick="var input = this.previousSibling; input.value = ''; input.focus();"></span>
</span>
</body>
</html>
你最终只会使用更丑陋的HTML(和非交叉浏览器兼容的JS;)).
请注意,当UI看起来不是你最关心的问题,但功能是,那么只需使用<input type="search">而不是<input type="text">.它将在支持HTML5的浏览器上显示(特定于浏览器)清除按钮.
- 当文本字段为空时,可以隐藏清除按钮吗？ (7认同)
- 我使用了纯 Javascript 版本，除了在 Win/Linux Firefox/Chrome 上将按钮居中之外，它运行良好。我通过删除子跨度中的“top：”并设置“display：flex;”解决了这个问题。父范围中的align-items: center;`。 (2认同)
wld*_*nfr 24
看看我们的jQuery-ClearSearch插件.它是一个可配置的jQuery插件 - 通过设计输入字段使其适应您的需求是直截了当的.只需按如下方式使用:
<input class="clearable" type="text" placeholder="search">
<script type="text/javascript">
$('.clearable').clearSearch();
</script>
示例:http://jsfiddle.net/wldaunfr/FERw3/
Tom*_*Tom 16
不幸的是,你实际上不能把它放在文本框中,只是让它看起来像在里面,不幸的是这意味着需要一些css:P
理论是将输入包装在div中,从输入中取出所有边框和背景,然后将div设置为看起来像框.然后,在代码中的输入框和作业之后放下按钮.
无论如何你必须工作;)
- +1认为你是水管工."工作是个好人" (5认同)
Tec*_*ist 11
当然，最好的方法是使用越来越受支持的<input type="search" />.
无论如何，为了获得一些编码乐趣，我认为也可以使用表单的重置按钮来实现，这是工作结果（值得注意的是，您不能在表单中输入其他输入，但使用这种方法的搜索字段，或重置按钮也会删除它们），不需要javascript：
form{
position: relative;
width: 200px;
}
form input {
width: 100%;
padding-right: 20px;
box-sizing: border-box;
}
form input:placeholder-shown + button{
opacity: 0;
pointer-events: none;
}
form button {
position: absolute;
border: none;
display: block;
width: 15px;
height: 15px;
line-height: 16px;
font-size: 12px;
border-radius: 50%;
top: 0;
bottom: 0;
right: 5px;
margin: auto;
background: #ddd;
padding: 0;
outline: none;
cursor: pointer;
transition: .1s;
}<form>
<input type="text" placeholder=" " />
<button type="reset">×</button>
</form>小智 8
我有一个创造性的解决方案，我认为你正在寻找
$('#clear').click(function() {
$('#input-outer input').val('');
});body {
font-family: "Tahoma";
}
#input-outer {
height: 2em;
width: 15em;
border: 1px #e7e7e7 solid;
border-radius: 20px;
}
#input-outer input {
height: 2em;
width: 80%;
border: 0px;
outline: none;
margin: 0 0 0 10px;
border-radius: 20px;
color: #666;
}
#clear {
position: relative;
float: right;
height: 20px;
width: 20px;
top: 5px;
right: 5px;
border-radius: 20px;
background: #f1f1f1;
color: white;
font-weight: bold;
text-align: center;
cursor: pointer;
}
#clear:hover {
background: #ccc;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="input-outer">
<input type="text">
<div id="clear">
X
</div>
</div>https://jsfiddle.net/qdesign/xn9eogmx/1/