如何像iPhone一样在HTML文本输入框中放置一个清除按钮？

131

我希望有一个漂亮的小图标，单击该图标将清除<INPUT>框中的文本。

这是为了节省空间，而不是在输入框外部没有清晰的链接。

我的CSS技能很弱...这是iPhone外观的~~屏幕快照~~。

— 休·布坎南
source

93

@thebluefox总结了最多的内容。您还只需要使用JavaScript即可使该按钮正常工作。这是一个SSCCE，您可以复制'n'粘贴'n'运行它：

<!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;））。

请注意，当用户界面外观不是您最关心的问题，而功能是，则只需使用<input type="search">代替即可<input type="text">。它将在支持HTML5的浏览器上显示（特定于浏览器的）清除按钮。

— BalusC
source

7

是否可以在文本字段为空时使清除按钮隐藏？

— 根

在IE9中，文字浮在十字图标下方。

— sedovav 2014年

由于主题更改，图像的网址不再正确。旧的图像可以被访问web.archive.org/web/20150101025546/http://cdn.sstatic.net/...

— zacaj

1

您还可以class="fa fa-remove"在内部跨度上使用带有超赞字体的图标来显示漂亮的十字图标

— singe3

我使用了纯Javascript版本，除了在Win / Linux Firefox / Chrome上将按钮居中之外，它运行良好。我通过删除top:子范围并设置display: flex; align-items: center;父范围来解决此问题。

— thomasa88

157

如今，使用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;
}

有关所提供功能的更多信息，请参见css-tricks.comtype="search"。

— 尼克·斯威汀（Nick Sweeting）
source

3

出色的答案，不涉及任何代码。不幸的是，许多浏览器都不支持。。没关系，这将是我产品中的Chrome附加功能:)

— guillaumepotier

48

HTML5引入了“搜索”输入类型，我相信它可以满足您的需求。

<input type="search" />

这是一个生动的例子。

— 雷神召唤师
source

4

尽管所有最近的浏览器都支持“搜索”类型（请在此处检查支持：wufoo.com/html5），但Firefox（32.0.3）或Opera（12.17）中未显示清除按钮。

— justanotherprogrammer 2014年

9

清除按钮也不显示在最新版的Chrome中

— tsayen 2015年

3

如果您使用的是Bootstrap，则它可能会覆盖默认行为

— aexl

链接的CodePen在输入中缺少右斜杠，因此，如果您希望看到它在CodePen上有效，只需添加右斜杠即可。

— Gen1-1

@ Gen1-1哎呀，好像已禁止公共上传blog.codepen.io/2019/08/06/anonymous-pen-save-option-removed 如果有人有固定的密码笔，请随时进行编辑并帮助更正演示

— ThorSummoner

24

查看我们的jQuery-ClearSearch插件。这是一个可配置的jQuery插件-通过对输入字段进行样式设置使其适应您的需求非常简单。只需按以下方式使用它：

<input class="clearable" type="text" placeholder="search">

<script type="text/javascript">
    $('.clearable').clearSearch();
</script>

例子：http : //jsfiddle.net/wldaunfr/FERw3/

— wldaunfr
source

这很棒，但是我建议添加“ $（window）.resize（function（）{triggerBtn（）}）;” 在jquery.clearsearch.js中，紧接在$ this.on（'keyup keydown change focus'，triggerBtn）;之后；| 这样调整大小的窗口就不会弄乱十字位置

— Ng Sek Long

17

不幸的是，您实际上不能将其放置在文本框中，而只能使其看起来像在其内部，不幸的是，这意味着需要一些CSS：P

理论是将输入包装在div中，将所有边框和背景从输入中移开，然后将div样式设置为类似于框。然后，将您的按钮放在代码中的输入框之后，然后将作业命名为good。

一旦您使其正常工作;）

— 汤姆
source

6

我有一个创造性的解决方案，我认为您正在寻找

$('#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/

— Mahmoud Ali Kassem
source

3

当然，最好的方法是使用越来越受支持的<input type="search" />。

无论如何，为了一点编码的乐趣，我认为也可以使用表单的重置按钮来实现，这是工作结果（值得注意的是，除了使用此方法的搜索字段外，不能再使用其他输入，否则重置按钮将删除他们也是），不需要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>

展开摘要

— 技术奈奎斯特
source

1

也许这个简单的解决方案可以帮助您：

<input type="text" id="myInput" value="No War"/><button onclick="document.getElementById('myInput').value = ''" title="Clear">X</button></input>

展开摘要

— 梅兰·莎格迪（Mehran Shagerdi）
source

尽管此代码可以为OP的问题提供解决方案，但强烈建议您提供有关此代码为何和/或如何回答问题的其他上下文。从长远来看，只有代码的答案通常变得毫无用处，因为遇到类似问题的未来观看者将无法理解解决方案背后的原因。

— E. Zeytinci

-1

@Mahmoud Ali Kaseem

我刚刚更改了一些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>

展开摘要

— ren人
source