[英]How do I put a clear button inside my HTML text input box like the iPhone does?
我想要一个漂亮的小图标，当点击它时将清除 <INPUT> 框中的文本。
这是为了节省空间，而不是在输入框外有一个清晰的链接。
我的 CSS 技能很弱……这是 iPhone 外观的
截图
照片。
现在有了 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;
}
有关type="search"提供的功能的更多信息，请参阅css-tricks.com 。
@thebluefox 总结了最重要的部分。 无论如何，您也只能被迫使用 JavaScript 使该按钮正常工作。 这是一个 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不是必需的，它只是很好地将渐进增强所需的逻辑与源代码分开，您当然也可以继续使用纯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 ;)）。
请注意，当 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 样式设置为看起来像盒子。 然后，在代码和工作的输入框之后放入您的按钮。
无论如何，一旦你让它工作;)
当然，最好的方法是使用越来越受支持的<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>
我有一个创造性的解决方案，我认为你正在寻找
$('#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>
也许这个简单的解决方案可以帮助：
<input type="text" id="myInput" value="No War"/><button onclick="document.getElementById('myInput').value = ''" title="Clear">X</button></input>
Firefox 似乎不支持清除搜索字段功能...我发现这个纯 CSS 解决方案效果很好： Textbox with a clear button完全在 CSS | 中。 代码笔 | 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 */ });
@马哈茂德·阿里·卡西姆
我刚刚更改了一些 CSS 以使其看起来不同并添加了 focus();
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>
在 HTML5 中如此简单
<input type="search">
这将完成你的工作！
如何制作 TextGeometry 多线？ 我如何将它放在一个正方形内，使其像 html 文本一样在 div 内包装？
[英]How do I make a TextGeometry multiline? How do I put it inside a square so it wraps like html text does inside a div?
如何清除Enter或换行符（html / javascript）的文本框？
[英]How can I clear a text box of enter or newline (html / javascript)?
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.