如何在iPhone的HTML文本input框中添加一个清晰的button？
我想要一个漂亮的小图标，单击时会清除<INPUT>框中的文本。
这是为了节省空间，而不是在input框之外有一个明确的链接。
我的CSS技巧很弱……这是iPhone外观的截图 。
@thebluefox总结了最重要的。 您也只能使用JavaScript来使该button无论如何工作。 这是一个SSCCE，你可以copy'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;））。
请注意，当用户界面look'n'feel不是你最大的担心，但function是，然后只使用<input type="search">而不是<input type="text"> 。 它将在HTML5浏览器上显示（浏览器特定的）清除button。
现在使用HTML5，这非常简单：
<input type="search" placeholder="Search..."/>
大多数现代浏览器默认会自动在字段中提供一个可用的清除button。
（如果你使用Bootstrap，你必须添加一个覆盖到你的css文件来显示）
input[type=search]::-webkit-search-cancel-button { -webkit-appearance: searchfield-cancel-button; }
Safari / WebKit浏览器还可以在使用type="search"时提供额外的function，例如results=5和autosave="..." ，但是它们也覆盖很多样式（例如高度，边框）。 为了防止这些覆盖，同时仍然保留像Xbutton这样的function，您可以将其添加到您的CSS：
input[type=search] { -webkit-appearance: none; }
有关由type="search"提供的function的更多信息，请参阅css-tricks.com 。
HTML5引入了“search”inputtypes，我相信你想要什么。
<input type="search" />
这里有一个实例 。
查看我们的jQuery-ClearSearch插件。 这是一个可configuration的jQuery插件 – 通过样式化input字段来适应您的需求是非常简单的。 只需使用它如下：
<input class="clearable" type="text" placeholder="search"> <script type="text/javascript"> $('.clearable').clearSearch(); </script>
例如： http : //jsfiddle.net/wldaunfr/FERw3/
你不能真的把它放在文本框里，不幸的是，只是看起来像它里面，不幸的是意味着一些CSS是必要的：P
理论是把input包裹在一个div中，把所有的边界和背景从input中取出，然后将div的样式设置为像盒子一样。 然后，在代码中的input框和作业good'un后，你的button。
一旦你有它的工作无论如何;）
我觉得你正在寻找一个创造性的解决scheme
$('#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>
@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>
