Javascript 清除输入文本中的图标

有没有一种快速的方法可以创建一个右边有图标的输入文本元素来清除输入元素本身（比如谷歌搜索框）

我环顾四周，但我只找到了如何将图标作为输入元素的背景。有jQuery插件或其他东西吗

我希望图标位于输入文本元素内，类似于：

--------------------------------------------------
|                                               X|
--------------------------------------------------

---

您可以使用带有图像样式的重置按钮

<form action="" method="get">
   <input type="text" name="search" required="required" placeholder="type here" />
   <input type="reset" value="" alt="clear" />
</form>

<style>
   input[type="text"]
   {
      height: 38px;
      font-size: 15pt;
   }

   input[type="text"]:invalid + input[type="reset"]{
     display: none;
   } 

   input[type="reset"]
   {
      background-image: url( http://png-5.findicons.com/files/icons/1150/tango/32/edit_clear.png );
      background-position: center center;
      background-repeat: no-repeat;
      height: 38px;
      width: 38px;
      border: none;
      background-color: transparent;
      cursor: pointer;
      position: relative;
      top: -9px;
      left: -44px;
   }
</style>

输入[type=“text”]
{
高度：38px；
字体大小：15磅；
}
输入[type=“text”]：无效+输入[type=“reset”]{
显示：无；
} 
输入[类型=“重置”]
{
背景图片：网址（http://png-5.findicons.com/files/icons/1150/tango/32/edit_clear.png );
背景位置：中心；
背景重复：无重复；
高度：38px；
宽度：38px；
边界：无；
背景色：透明；
光标：指针；
位置：相对位置；
顶部：-9px；
左：-44px；
}

---

查看此处的操作：

编辑：我找到了此链接。希望能有帮助

您已经提到希望它位于输入文本的右侧。因此，最好的方法是在输入框旁边创建一个图像。如果您正在查看框内的内容，可以使用背景图像，但可能无法编写脚本来清除框

因此，插入并镜像并编写JavaScript代码以清除文本框。

在输入中添加

type=“search”

---

该支持相当不错，但在IE中不起作用。如果您同意将其限制在兼容html 5的浏览器中，我建议您只需使用：

<input type="search" />

诚然，在Chromium（Ubuntu11.04）中，在出现明文图像/功能之前，

input

元素中必须有文本

参考：

---

如果你想让它像谷歌一样，那么你应该知道“X”实际上并不在

中——它们彼此相邻，外部容器的样式看起来像文本框

HTML:

示例：

这里有一个jQuery插件（最后还有一个演示）

我这样做主要是为了说明一个例子（和一个个人挑战）。虽然赞成票是受欢迎的，但其他答案都是及时分发的，值得他们的认可

---

不过，在我看来，这是过度设计的膨胀（除非它成为UI库的一部分）。

由于没有任何解决方案真正满足我们的要求，我们提出了一个简单的jQuery插件，名为-

使用它非常简单，如下所示：

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

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

$（'.clearable'）.clearSearch（）；

​

---

示例：

我使用jQuery和bootstrap编写了一个简单的组件。

---

试试看：

不需要包含CSS或图像文件。不需要包括整个重炮jQuery UI库。我编写了一个轻量级jQuery插件，它为您发挥了神奇的作用。您只需要

jQuery

和=）

---

在这里摆弄：

使用jquery插件，我已经根据自己的需要对其进行了调整，添加了自定义选项并创建了一个新插件。你可以在这里找到它：

一个简单用法的示例：

<script src='http://code.jquery.com/jquery-1.9.1.js'></script>
<script src='http://code.jquery.com/ui/1.10.3/jquery-ui.js'></script>
<script src='src/jquery.clearField.js'></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">
<link rel="stylesheet" href="css/jquery.clearField.css">

<table>
    <tr>
        <td><input name="test1" id="test1" clas="test" type='text'></td>
        <td>Empty</td>
    </tr>
    <tr>
        <td><input name="test2" id="test2" clas="test" type='text' value='abc'></td>
        <td>Not empty</td>
    </tr>
</table>

<script>
    $('.test').clearField();
</script>

空的
不空
$（'.test'）.clearField（）；

获得这样的东西：

---

我已经用CSS创建了一个可清除的文本框。它不需要javascript代码就可以工作

下面是演示链接

---

jQuery Mobile现在内置了以下功能：

<input type="text" name="clear" id="clear-demo" value="" data-clear-btn="true">

，

目前在所有现代浏览器中都受支持：

---

类似的东西？？？

.searchinput{
显示：内联块；垂直对齐：底部；
宽度：30%；填充：5px；右侧填充：27px；边框：1px实心#ccc；
大纲：无；
}
.clearspace{宽度：20px；显示：内联块；左边距：-25px；
}
.清楚{
宽度：20px；
过渡：最大宽度0.3s；溢出：隐藏；浮动：右侧；
显示：块；最大宽度：0px；
}
.表演{
光标：指针；宽度：20px；最大宽度：20px；
}
表单{空白：nowrap；}
$（文档）.ready（函数（）{
$（“input.searchinput”）。在（“&cross；”）之后；
$（“input.searchinput”）。在（'keyup input'，function（）上{
if（$（this.val（））{$（“.clear”）.addClass（“show”）；}else{$（“.clear”）.removeClass（“show”）；}
});
$（'.clear'）。单击（函数（）{
$（'input.searchinput'）.val（''.focus（）；
$（“.clear”）.removeClass（“show”）；
});
});

输入[type=“text”]
{
高度：38px；
字体大小：15磅；
}
输入[type=“text”]：无效+输入[type=“reset”]{
显示：无；
} 
输入[类型=“重置”]
{
背景图片：网址（http://png-5.findicons.com/files/icons/1150/tango/32/edit_clear.png );
背景位置：中心；
背景重复：无重复；
高度：38px；
宽度：38px；
边界：无；
背景色：透明；
光标：指针；
位置：相对位置；
顶部：-9px；
左：-44px；
}

您可以使用此命令（无需引导）

Array.from（document.querySelectorAll（'.search字段'））.forEach（字段=>{
field.querySelector（'span'）。addEventListener（'click'，e=>{
field.querySelector（'input'）。值=''；
});
});
：根目录{
--主题颜色：青色；
}
.包装纸{
宽度：80%；
保证金：0自动；
}
div{
位置：相对位置；
}
输入{
背景：无；
大纲：无；
显示：内联块；
宽度：100%；
利润率：8px0；
填充：13px 15px；
右侧填充：42.5px；
边框：1px实心变量（--主题颜色）；
边界半径：5px；
框大小：边框框；
}
跨度{
位置：绝对位置；
排名：0；
右：0；
利润率：8px0；
填充：13px 15px；
颜色：var（--主题颜色）；
字体大小：粗体；
光标：指针；
}
跨度：之后{
内容：'\2716'；
}<script src='http://code.jquery.com/jquery-1.9.1.js'></script>
<script src='http://code.jquery.com/ui/1.10.3/jquery-ui.js'></script>
<script src='src/jquery.clearField.js'></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">
<link rel="stylesheet" href="css/jquery.clearField.css">

<table>
    <tr>
        <td><input name="test1" id="test1" clas="test" type='text'></td>
        <td>Empty</td>
    </tr>
    <tr>
        <td><input name="test2" id="test2" clas="test" type='text' value='abc'></td>
        <td>Not empty</td>
    </tr>
</table>

<script>
    $('.test').clearField();
</script>

<input type="text" name="clear" id="clear-demo" value="" data-clear-btn="true">

    <!DOCTYPE html>
<html>
<head>
    <title></title>
    <style type="text/css">
    .searchinput{
    display:inline-block;vertical-align: bottom;
    width:30%;padding: 5px;padding-right:27px;border:1px solid #ccc;
        outline: none;
}
        .clearspace{width: 20px;display: inline-block;margin-left:-25px;
}
.clear {
    width: 20px;
    transition: max-width 0.3s;overflow: hidden;float: right;
    display: block;max-width: 0px;
}

.show {
    cursor: pointer;width: 20px;max-width:20px;
}
form{white-space: nowrap;}

    </style>
</head>
<body>
<form>
<input type="text" class="searchinput">
</form>
<script src="jquery-1.11.3.min.js" type="text/javascript"></script> <script>
$(document).ready(function() {
$("input.searchinput").after('<span class="clearspace"><i class="clear" title="clear">&cross;</i></span>');
$("input.searchinput").on('keyup input',function(){
if ($(this).val()) {$(".clear").addClass("show");} else {$(".clear").removeClass("show");}
});
$('.clear').click(function(){
    $('input.searchinput').val('').focus();
    $(".clear").removeClass("show");
});
});
</script>
</body>
</html>

<form action="" method="get">
   <input type="text" name="search" required="required" placeholder="type here" />
   <input type="reset" value="" alt="clear" />
</form>

<style>
   input[type="text"]
   {
      height: 38px;
      font-size: 15pt;
   }

   input[type="text"]:invalid + input[type="reset"]{
     display: none;
   } 

   input[type="reset"]
   {
      background-image: url( http://png-5.findicons.com/files/icons/1150/tango/32/edit_clear.png );
      background-position: center center;
      background-repeat: no-repeat;
      height: 38px;
      width: 38px;
      border: none;
      background-color: transparent;
      cursor: pointer;
      position: relative;
      top: -9px;
      left: -44px;
   }
</style>