如何在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。

纯HTML5搜索输入字段

(如果你使用Bootstrap,你必须添加一个覆盖到你的css文件来显示)

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

引导程序搜索输入字段

Safari / WebKit浏览器还可以在使用type="search"时提供额外的function,例如results=5autosave="..." ,但是它们也覆盖很多样式(例如高度,边框)。 为了防止这些覆盖,同时仍然保留像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>