如何像 iPhone 一样在 HTML 文本输入框中放置一个清除按钮?

我想有一个漂亮的小图标,当单击将清除 < INPUT > 框中的文本。

这是为了节省空间,而不是在输入框之外有一个清晰的链接。

我的 CSS 技能很弱... 这是一张关于 iPhone 外观的 截图照片。

258571 次浏览

不幸的是,你不能把它放在文本框中,只能让它看起来像它的内部,这就意味着需要一些 css

原理是将输入包装在一个 div 中,去掉输入中的所有边框和背景,然后将 div 样式设置为与方框相似。然后,把你的按钮后的输入框中的代码和作业一个很好的‘ un’。

无论如何,一旦你让它工作了;)

从 HTML5开始,您可以使用 <input type="search">。但这不一定是可定制的。如果你想完全控制 UI,这里有两个例子。一个有 jQuery,另一个没有。

使用 jQuery:

<!DOCTYPE html>
<html lang="en">
<head>
<title>SO question 2803532</title>
<script src="https://code.jquery.com/jquery-latest.min.js"></script>
<script>
$(document).ready(function() {
$('input.deletable').wrap('<span class="deleteicon"></span>').after($('<span>x</span>').click(function() {
$(this).prev('input').val('').trigger('change').focus();
}));
});
</script>
<style>
span.deleteicon {
position: relative;
display: inline-flex;
align-items: center;
}
span.deleteicon span {
position: absolute;
display: block;
right: 3px;
width: 15px;
height: 15px;
border-radius: 50%;
color: #fff;
background-color: #ccc;
font: 13px monospace;
text-align: center;
line-height: 1em;
cursor: pointer;
}
span.deleteicon input {
padding-right: 18px;
box-sizing: border-box;
}
</style>
</head>
<body>
<input type="text" class="deletable">
</body>
</html>

没有 jQuery

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;
display: inline-flex;
align-items: center;
}
span.deleteicon span {
position: absolute;
display: block;
right: 3px;
width: 15px;
height: 15px;
border-radius: 50%;
color: #fff;
background-color: #ccc;
font: 13px monospace;
text-align: center;
line-height: 1em;
cursor: pointer;
}
span.deleteicon input {
padding-right: 18px;
box-sizing: border-box;
}
</style>
</head>
<body>
<span class="deleteicon">
<input type="text">
<span onclick="var input = this.previousElementSibling; input.value = ''; input.focus();">x</span>
</span>
</body>
</html>

最终只能得到更丑陋的 HTML (和非跨浏览器兼容的 JS;)。

同样,如果 UI look’n’feel 不是您最关心的问题,但功能是,那么只需使用 <input type="search">而不是 <input type="text">。它将在支持 HTML5的浏览器上显示(特定于浏览器的) clear 按钮。

看看我们的 JQuery-ClearSearch插件。它是一个可配置的 jQuery 插件——通过样式化输入字段使其适应您的需要非常简单。只要按以下方式使用:

<input class="clearable" type="text" placeholder="search">


<script type="text/javascript">
$('.clearable').clearSearch();
</script>

例子

HTML5引入了“搜索”输入类型,我相信它可以满足您的需要。

<input type="search" />

这是 活生生的例子

我有一个创造性的解决方案,我想你正在寻找

$('#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/

如今,HTML5非常简单:

<input type="search" placeholder="Search..."/>

默认情况下,大多数现代浏览器会自动在字段中呈现一个可用的透明按钮。

plain HTML5 search input field

(如果您使用 Bootstrap,则必须在 css 文件中添加一个覆盖以使其显示)

input[type=search]::-webkit-search-cancel-button {
-webkit-appearance: searchfield-cancel-button;
}

bootstrap search input field

Safari/WebKit 浏览器在使用 type="search"时也可以提供额外的特性,比如 results=5autosave="...",但是它们也覆盖了许多样式(比如高度、边框)。为了防止这些重写,同时仍然保留像 X 按钮这样的功能,你可以把这个添加到你的 css:

input[type=search] {
-webkit-appearance: none;
}

有关 type="search"提供的特性,请参阅 Css-tricks.com 了解更多信息

@ Mahmoud Ali Kaseem

我只是改变了一些 CSS,使它看起来不同,并添加了焦点() ;

Https://jsfiddle.net/xn9eogmx/81/

$('#clear').click(function() {
$('#input-outer input').val('');
$('#input-outer input').focus();
});
body {
font-family: "Arial";
font-size: 14px;
}
#input-outer {
height: 2em;
width: 15em;
border: 1px #777 solid;
position: relative;
padding: 0px;
border-radius: 4px;
}
#input-outer input {
height: 100%;
width: 100%;
border: 0px;
outline: none;
margin: 0 0 0 0px;
color: #666;
box-sizing: border-box;
padding: 5px;
padding-right: 35px;
border-radius: 4px;
}
#clear {
position: absolute;
float: right;
height: 2em;
width: 2em;
top: 0px;
right: 0px;
background: #aaa;
color: white;
text-align: center;
cursor: pointer;
border-radius: 0px 4px 4px 0px;
}
#clear:after {
content: "\274c";
position: absolute;
top: 4px;
right: 7px;
}
#clear:hover,
#clear:focus {
background: #888;
}
#clear:active {
background: #666;
}
<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"></div>
</div>

当然,最好的方法是使用越来越受支持的 <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">&times;</button>
</form>

也许这个简单的解决方案能帮上忙:

<input type="text" id="myInput" value="No War"/><button onclick="document.getElementById('myInput').value = ''" title="Clear">X</button></input>

在 HTML5中它是如此简单

<input type="search">

这样就能完成你的工作了!

Firefox 似乎不支持清晰的搜索字段功能... ... 我发现这个纯 CSS 解决方案非常好用: 完全使用 CSS 的带有清晰按钮的文本框 | Codepen | 2013。奇迹发生在

.search-box:not(:valid) ~ .close-icon {
display: none;
}

body {
background-color: #f1f1f1;
font-family: Helvetica,Arial,Verdana;


}
h2 {
color: green;
text-align: center;
}
.redfamily {
color: red;
}
.search-box,.close-icon,.search-wrapper {
position: relative;
padding: 10px;
}
.search-wrapper {
width: 500px;
margin: auto;
}
.search-box {
width: 80%;
border: 1px solid #ccc;
outline: 0;
border-radius: 15px;
}
.search-box:focus {
box-shadow: 0 0 15px 5px #b0e0ee;
border: 2px solid #bebede;
}
.close-icon {
border:1px solid transparent;
background-color: transparent;
display: inline-block;
vertical-align: middle;
outline: 0;
cursor: pointer;
}
.close-icon:after {
content: "X";
display: block;
width: 15px;
height: 15px;
position: absolute;
background-color: #FA9595;
z-index:1;
right: 35px;
top: 0;
bottom: 0;
margin: auto;
padding: 2px;
border-radius: 50%;
text-align: center;
color: white;
font-weight: normal;
font-size: 12px;
box-shadow: 0 0 2px #E50F0F;
cursor: pointer;
}
.search-box:not(:valid) ~ .close-icon {
display: none;
}
<h2>
Textbox with a clear button completely in CSS <br> <span class="redfamily">< 0 lines of JavaScript ></span>
</h2>
<div class="search-wrapper">
<form>
<input type="text" name="focus" required class="search-box" placeholder="Enter search term" />
<button class="close-icon" type="reset"></button>
</form>
</div>

我需要更多的功能,并在代码中添加了这个 jQuery:

$('.close-icon').click(function(){ /* my code */ });