如何在输入字段中添加删除清除字段的图标

Question

一个标准的输入字段，具有 type="date" AngularJS 1.3中提供了一个 "清除字段 "的图标。这里是 我是什么意思。

有没有办法将 "清除字段 "的图标添加到输入字段中，并将其与 type="text"?

Answer 1

这不是Angular的事情。 这是HTML 5的一个功能。 你可以通过使用以下方法来模拟同样的clear x按钮 type='search'. 你的输入仍然会看起来像一个文本输入。

<input type="search">

Answer 2

这两种解决方案都能做到。不同的是风格。

1. 使用 <input type="search"> 输入字段得到 圆角 (这给了它一个直观的搜索框的感觉:)，而初始的 占位符.我相信我在某个地方读到过不建议操作影子DOM，所以我认为最好不要弄它。如果我说的不对，请纠正我。PS：很高兴能了解到标准的输入 type="search".

2. A plain JS, HTML, CSS 解决办法 对我的问题的评论中提出的 正是 我正在寻找的东西。我还是用 type="text" 的输入框，并有一个 class="clearable".

哪儿 class="clearable" 是如下。

.clearable{
 background: #fff
 url(data:image/gif;base64,R0lGODlhBwAHAIAAAP///5KSkiH5BAAAAAAALAAAAAAHAAcAAAIMTICmsGrIXnLxuDMLADs=) no-repeat right -10px center;
 border: 1px solid #999;
 padding: 3px 18px 3px 4px; /* Use the same right padding (18) in jQ! */
 border-radius: 3px;
 transition: background 0.4s;
}
.clearable.x  { background-position: right 5px center; }
.clearable.onX{ cursor: pointer; }

这取决于使用情况和个人喜好。两种解决方案都很好。

@神很好，请你把你的评论改写成答案，s.t.我可以接受。

@劳埃德-班克斯，也非常感谢你的解决方案，对于搜索类型的输入字段来说，这个方案非常好。

注

如果使用除 clearable，请记住，可能会有冲突。