我想要一个漂亮的小图标，当点击它时将清除 <INPUT> 框中的文本。
这是为了节省空间，而不是在输入框外有一个清晰的链接。
我的 CSS 技能很弱……这是iPhone 外观的截图照片。
如何像 iPhone 一样在 HTML 文本输入框中放置一个清除按钮？
IT技术
javascript
iphone
html
css
2021-02-23 11:25:31
6个回答
现在有了 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 提供的功能的更多信息，请参阅css-tricks.comtype="search"。
从 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 的外观不是您最关心的问题，但功能是您最关心的，那么只需使用<input type="search">而不是<input type="text">. 它将在支持 HTML5 的浏览器上显示（特定于浏览器的）清除按钮。
查看我们的jQuery-ClearSearch插件。这是一个可配置的 jQuery 插件 - 通过设置输入字段的样式来适应您的需求非常简单。只需按如下方式使用它：
<input class="clearable" type="text" placeholder="search">
<script type="text/javascript">
$('.clearable').clearSearch();
</script>
不幸的是，您实际上不能将它放在文本框中，只能让它看起来像它在里面，不幸的是，这意味着需要一些 css :P
理论是将输入包装在一个 div 中，从输入中去除所有边框和背景，然后将 div 设置为看起来像盒子。然后，在代码和工作的输入框之后放入您的按钮。
无论如何，一旦你让它工作;)
其它你可能感兴趣的问题