我想有一个漂亮的小图标,当单击将清除 < INPUT > 框中的文本。
这是为了节省空间,而不是在输入框之外有一个清晰的链接。
我的 CSS 技能很弱... 这是一张关于 iPhone 外观的 截图照片。
不幸的是,你不能把它放在文本框中,只能让它看起来像它的内部,这就意味着需要一些 css
原理是将输入包装在一个 div 中,去掉输入中的所有边框和背景,然后将 div 样式设置为与方框相似。然后,把你的按钮后的输入框中的代码和作业一个很好的‘ un’。
无论如何,一旦你让它工作了;)
从 HTML5开始,您可以使用 <input type="search">。但这不一定是可定制的。如果你想完全控制 UI,这里有两个例子。一个有 jQuery,另一个没有。
<input type="search">
<!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 并不是必需的,它只是将渐进增强所需的逻辑与源代码很好地分离开来,当然你也可以继续使用 平淡无奇 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 按钮。
<input type="text">
看看我们的 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..."/>
默认情况下,大多数现代浏览器会自动在字段中呈现一个可用的透明按钮。
(如果您使用 Bootstrap,则必须在 css 文件中添加一个覆盖以使其显示)
input[type=search]::-webkit-search-cancel-button { -webkit-appearance: searchfield-cancel-button; }
Safari/WebKit 浏览器在使用 type="search"时也可以提供额外的特性,比如 results=5和 autosave="...",但是它们也覆盖了许多样式(比如高度、边框)。为了防止这些重写,同时仍然保留像 X 按钮这样的功能,你可以把这个添加到你的 css:
type="search"
results=5
autosave="..."
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">×</button> </form>
也许这个简单的解决方案能帮上忙:
<input type="text" id="myInput" value="No War"/><button onclick="document.getElementById('myInput').value = ''" title="Clear">X</button></input>
在 HTML5中它是如此简单
这样就能完成你的工作了!
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 */ });