[英]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.