Question

我希望有一个漂亮的小图标，点击后会清除＆lt; INPUT＆gt;中的文字。框。

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

我的CSS技能很弱......这是一张关于iPhone外观的 ~~screenshot~~ 照片。

Answer 1

现在使用HTML5，它非常简单：

    React.DOM.form
        onSubmit: @handleSubmit
        # -> 
            React.DOM.div # Problem is here
                className: 'form-group'

默认情况下，大多数现代浏览器会自动在字段中呈现可用的清除按钮。

（如果您使用Bootstrap，则必须在css文件中添加覆盖以使其显示）

<input type="search" placeholder="Search..."/>

Safari / WebKit浏览器在使用input[type=search]::-webkit-search-cancel-button { -webkit-appearance: searchfield-cancel-button; }时也可以提供额外的功能，例如type="search"和results=5，但它们也会覆盖您的许多样式（例如高度，边框）。为了防止这些覆盖，同时仍保留X按钮等功能，您可以将其添加到您的css：

autosave="..."

有关input[type=search] { -webkit-appearance: none; }提供的功能，请参阅css-tricks.com for more info。

Answer 2

@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>

Live example here

jQuery顺便说一下，它只是很好地将渐进增强所需的逻辑与源分开，你当然也可以继续使用 plain 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的浏览器上显示（特定于浏览器的）清除按钮。

Answer 3

HTML5引入了搜索＆＃39;输入类型，我相信做你想要的。

<input type="search" />

这里是live example。

Answer 4

查看我们的jQuery-ClearSearch插件。它是一个可配置的jQuery插件 - 通过设计输入字段使其适应您的需求是直截了当的。只需使用如下：

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

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

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

Answer 5

不幸的是，你实际上不能把它放在文本框里面，只是让它看起来像它里面一样，不幸的是这意味着需要一些css：P

理论是将输入包装在div中，从输入中取出所有边框和背景，然后将div设置为看起来像框。然后，在代码中的输入框和作业之后放下按钮，好了。

无论如何你必须工作;）

Answer 6

当然，最好的方法是使用越来越受支持的<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>

Answer 7

这个简单的解决方案可能会有所帮助：

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

Answer 8

@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>

Answer 9

在HTML5中是如此简单

<input type="search">

这会做好您的工作！

Answer 10

Firefox 似乎不支持清除搜索字段功能...我发现这个纯 CSS 解决方案效果很好：Textbox with a clear button completely in 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 */ });

如何在我的HTML文本输入框中放置一个清晰的按钮，就像iPhone一样？

10 个答案: