Javascript 如何像 iPhone 一样在 HTML 文本输入框中放置一个清除按钮？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2803532/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How do I put a clear button inside my HTML text input box like the iPhone does?
提问by Hugh Buchanan
I want to have a nice little icon that, when clicked will clear the text in the <INPUT> box.
我想要一个漂亮的小图标，当点击它时将清除 <INPUT> 框中的文本。
This is to save space rather than having a clear link outside of the input box.
这是为了节省空间，而不是在输入框外有一个清晰的链接。
My CSS skills are weak... Here is a screenshotphoto of how the iPhone looks.
我的 CSS 技能很弱……这是iPhone 外观的截图照片。
采纳答案by BalusC
@thebluefox has summarized the most of all. You're only also forced to use JavaScript to make that button to work anyway. Here's an SSCCE, you can copy'n'paste'n'run it:
@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>
jQueryis by the way not necessary, it just nicely separates the logic needed for progressive enhancement from the source, you can of course also go ahead with plainHTML/CSS/JS:
顺便说一下，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>
You only ends up with uglier HTML (and non-crossbrowser compatible JS ;) ).
你只会得到更丑陋的 HTML（和非跨浏览器兼容的 JS ;)）。
Note that when the UI look'n'feel isn't your biggest concern, but the functionality is, then just use <input type="search">instead of <input type="text">. It'll show the (browser-specific) clear button on HTML5 capable browsers.
请注意，当 UI 外观不是您最关心的问题，但功能是，那么只需使用<input type="search">而不是<input type="text">. 它将在支持 HTML5 的浏览器上显示（特定于浏览器的）清除按钮。
回答by Nick Sweeting
Nowadays with HTML5, it's pretty simple:
现在有了 HTML5，这很简单：
<input type="search" placeholder="Search..."/>
Most modern browsers will automatically render a usable clear button in the field by default.
默认情况下，大多数现代浏览器会自动在字段中呈现可用的清除按钮。
(If you use Bootstrap, you'll have to add an override to your css file to make it show)
（如果您使用 Bootstrap，则必须在 css 文件中添加覆盖以使其显示）
input[type=search]::-webkit-search-cancel-button {
-webkit-appearance: searchfield-cancel-button;
}
Safari/WebKit browsers can also provide extra features when using type="search", like results=5and autosave="...", but they also override many of your styles (e.g. height, borders) . To prevent those overrides, while still retaining functionality like the X button, you can add this to your css:
Safari/WebKit 浏览器在使用type="search"、results=5和时也可以提供额外的功能autosave="..."，但它们也会覆盖您的许多样式（例如高度、边框）。为了防止这些覆盖，同时仍保留 X 按钮等功能，您可以将其添加到您的 css 中：
input[type=search] {
-webkit-appearance: none;
}
See css-tricks.com for more infoabout the features provided by type="search".
有关.css提供的功能的更多信息，请参阅css-tricks.comtype="search"。
回答by ThorSummoner
HTML5 introduces the 'search' input type that I believe does what you want.
HTML5 引入了“搜索”输入类型，我相信它可以满足您的需求。
<input type="search" />
<input type="search" />
Here's a live example.
这是一个活生生的例子。
回答by wldaunfr
Check out our jQuery-ClearSearchplugin. It's a configurable jQuery plugin - adapting it to your needs by styling the input field is straightforward. Just use it as follows:
查看我们的jQuery-ClearSearch插件。这是一个可配置的 jQuery 插件 - 通过设置输入字段的样式来使其适应您的需求非常简单。只需按如下方式使用它：
<input class="clearable" type="text" placeholder="search">
<script type="text/javascript">
$('.clearable').clearSearch();
</script>
? Example: http://jsfiddle.net/wldaunfr/FERw3/
回答by Tom
You can't actually put it inside the text box unfortunately, only make it look like its inside it, which unfortunately means some css is needed :P
不幸的是，您实际上不能将它放在文本框中，只能让它看起来像它在里面，不幸的是，这意味着需要一些 css :P
Theory is wrap the input in a div, take all the borders and backgrounds off the input, then style the div up to look like the box. Then, drop in your button after the input box in the code and the jobs a good'un.
理论是将输入包装在一个 div 中，从输入中去除所有边框和背景，然后将 div 样式设置为看起来像盒子。然后，在代码和工作的输入框之后放入您的按钮。
Once you've got it to work anyway ;)
无论如何，一旦你让它工作;)
回答by Mahmoud Ali Kassem
I got a creative solution I think you are looking for
我有一个创造性的解决方案，我认为你正在寻找
$('#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>回答by TechNyquist
Of course the best approach is to use the ever-more-supported <input type="search" />.
当然，最好的方法是使用越来越受支持的<input type="search" />.
Anyway for a bit of coding fun I thought that it could be achieved also using the form's reset button, and this is the working result (it worths notings that cannot live other inputs but the search field with this approach, or the reset button will erase them too), no javascript needed:
无论如何，为了获得一些编码乐趣，我认为也可以使用表单的重置按钮来实现，这是工作结果（值得注意的是，使用这种方法不能保留其他输入但搜索字段，否则重置按钮将擦除他们也是），不需要javascript：
form > div{
position: relative;
width: 200px;
}
form [type="text"] {
width: 100%;
padding-right: 20px;
}
form [type="reset"] {
position: absolute;
border: none;
display: block;
width: 16px;
border-radius: 20px;
top: 2px;
bottom: 2px;
right: -20px;
background-color: #ddd;
padding: 0px;
margin: 0px;
}<form>
<div>
<input type="text" />
<input type="reset" value="X" />
</div>
</form>回答by Mehran Shagerdi
Maybe this simple solution can help:
也许这个简单的解决方案可以帮助：
<input type="text" id="myInput" value="No War"/><button onclick="document.getElementById('myInput').value = ''" title="Clear">X</button></input>回答by Hiren
@Mahmoud Ali Kaseem
@马哈茂德·阿里·卡西姆
I have just changed some CSS to make it look different and added focus();
我刚刚更改了一些 CSS 以使其看起来不同并添加了 focus();
https://jsfiddle.net/xn9eogmx/81/
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: "4c";
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>