如何像 iPhone 一样在 HTML 文本输入框中放置一个清除按钮？
[英]How do I put a clear button inside my HTML text input box like the iPhone does?
问题描述
I want to have a nice little icon that, when clicked will clear the text in the <INPUT> box.
我想要一个漂亮的小图标，当点击它时将清除 <INPUT> 框中的文本。
This is to save space rather than having a clear link outside of the input box.这是为了节省空间，而不是在输入框外有一个清晰的链接。
My CSS skills are weak... Here is a
screenshot
photo of how the iPhone looks.我的 CSS 技能很弱……这是 iPhone 外观的
截图
照片。
11 个解决方案
解决方案1
200 2016-02-12 01:30:45
Nowadays with HTML5, it's pretty simple:现在有了 HTML5，这很简单：
<input type="search" placeholder="Search..."/>
Most modern browsers will automatically render a usable clear button in the field by default.默认情况下，大多数现代浏览器会自动在字段中呈现可用的清除按钮。
(If you use Bootstrap, you'll have to add an override to your css file to make it show) （如果您使用 Bootstrap，则必须在 css 文件中添加覆盖以使其显示）
input[type=search]::-webkit-search-cancel-button {
-webkit-appearance: searchfield-cancel-button;
}
Safari/WebKit browsers can also provide extra features when using type="search" , like results=5 and autosave="..." , but they also override many of your styles (eg height, borders) . Safari/WebKit 浏览器还可以在使用type="search"时提供额外的功能，例如results=5和autosave="..." ，但它们也会覆盖您的许多样式（例如高度、边框）。 To prevent those overrides, while still retaining functionality like the X button, you can add this to your css:为了防止这些覆盖，同时仍保留 X 按钮等功能，您可以将其添加到您的 css 中：
input[type=search] {
-webkit-appearance: none;
}
See css-tricks.com for more info about the features provided by type="search" .有关type="search"提供的功能的更多信息，请参阅css-tricks.com 。
解决方案2
96 已采纳 2010-05-10 15:28:36
@thebluefox has summarized the most of all. @thebluefox 总结了最重要的部分。 You're only also forced to use JavaScript to make that button to work anyway.无论如何，您也只能被迫使用 JavaScript 使该按钮正常工作。 Here's an SSCCE, you can copy'n'paste'n'run it:这是一个 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 is by the way not necessary, it just nicely separates the logic needed for progressive enhancement from the source, you can of course also go ahead with plain HTML/CSS/JS:顺便说一下， 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>
You only ends up with uglier HTML (and non-crossbrowser compatible JS ;) ).你只会得到更丑陋的 HTML（和非跨浏览器兼容的 JS ;)）。
Note that when the UI look'n'feel isn't your biggest concern, but the functionality is, then just use <input type="search"> instead of <input type="text"> .请注意，当 UI 外观不是您最关心的问题，但功能是，那么只需使用<input type="search">而不是<input type="text"> 。 It'll show the (browser-specific) clear button on HTML5 capable browsers.它将在支持 HTML5 的浏览器上显示（特定于浏览器的）清除按钮。
解决方案3
61
HTML5 introduces the 'search' input type that I believe does what you want. HTML5 引入了“搜索”输入类型，我相信它可以满足您的需求。
<input type="search" />
Here's a live example .这是一个活生生的例子。
解决方案4
24 2012-09-13 09:25:57
Check out our jQuery-ClearSearch plugin.查看我们的jQuery-ClearSearch插件。 It's a configurable jQuery plugin - adapting it to your needs by styling the input field is straightforward.这是一个可配置的 jQuery 插件 - 通过设置输入字段的样式来使其适应您的需求非常简单。 Just use it as follows:只需按如下方式使用它：
<input class="clearable" type="text" placeholder="search">
<script type="text/javascript">
$('.clearable').clearSearch();
</script>
Example: http://jsfiddle.net/wldaunfr/FERw3/示例： http : //jsfiddle.net/wldaunfr/FERw3/
解决方案5
18 2010-05-10 14:57:12
You can't actually put it inside the text box unfortunately, only make it look like its inside it, which unfortunately means some css is needed :P不幸的是，您实际上不能将它放在文本框中，只能让它看起来像它在里面，不幸的是，这意味着需要一些 css :P
Theory is wrap the input in a div, take all the borders and backgrounds off the input, then style the div up to look like the box.理论是将输入包装在一个 div 中，从输入中去除所有边框和背景，然后将 div 样式设置为看起来像盒子。 Then, drop in your button after the input box in the code and the jobs a good'un.然后，在代码和工作的输入框之后放入您的按钮。
Once you've got it to work anyway ;)无论如何，一旦你让它工作;)
解决方案6
11 2018-03-09 09:15:31
Of course the best approach is to use the ever-more-supported <input type="search" /> .当然，最好的方法是使用越来越受支持的<input type="search" /> 。
Anyway for a bit of coding fun I thought that it could be achieved also using the form's reset button, and this is the working result (it is worth noting that you cannot have other inputs in the form but the search field with this approach, or the reset button will erase them too), no javascript needed:无论如何，为了获得一些编码乐趣，我认为也可以使用表单的重置按钮来实现，这就是工作结果（值得注意的是，您不能在表单中输入其他输入，只能使用这种方法的搜索字段，或者重置按钮也会删除它们），不需要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>
解决方案7
8 2015-04-29 22:23:46
I got a creative solution I think you are looking for我有一个创造性的解决方案，我认为你正在寻找
$('#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/ https://jsfiddle.net/qdesign/xn9eogmx/1/
解决方案8
0 2020-01-07 18:19:08
也许这个简单的解决方案可以帮助：
<input type="text" id="myInput" value="No War"/><button onclick="document.getElementById('myInput').value = ''" title="Clear">X</button></input>
解决方案9
0 2021-01-16 23:02:30
Firefox doesn't seem to support the clear search field functionality... I found this pure CSS solution that works nicely: Textbox with a clear button completely in CSS | Firefox 似乎不支持清除搜索字段功能...我发现这个纯 CSS 解决方案效果很好： Textbox with a clear button完全在 CSS | 中。 Codepen |代码笔 | 2013 . 2013 年。 The magic happens at魔法发生在
.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>
I needed more functionality and added this jQuery in my code:我需要更多功能并在我的代码中添加了这个 jQuery：
$('.close-icon').click(function(){ /* my code */ });
解决方案10
-1 2016-11-03 06:32:30
@Mahmoud Ali Kaseem @马哈茂德·阿里·卡西姆
I have just changed some CSS to make it look different and added focus();我刚刚更改了一些 CSS 以使其看起来不同并添加了 focus();
https://jsfiddle.net/xn9eogmx/81/ 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>
解决方案11
-1 2020-10-05 12:59:27
It is so simple in HTML5在 HTML5 中如此简单
<input type="search">
This will do your job!这将完成你的工作！
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.