Question

AngularJS 1.3中带有type="date"的标准输入字段提供了“清除字段”图标。 Here is我的意思。

有没有办法将这种“清除字段”图标添加到type="text"的输入字段？

Answer 1

这不是一个角色的事情。它是HTML 5的一项功能。您可以使用type='search'模拟相同的清除x按钮。您的输入仍然看起来像文本输入。

<input type="search">

Answer 2

两个解决方案都能完成这项工作。不同的是风格。

默认情况下，<input type="search">输入字段获得rounded corners（这使得它具有搜索框的直观感觉:)和初始placeholder text。我相信我在某处读过不建议操纵阴影DOM，所以我认为最好不要操纵它。如果我错了，请纠正我。 PS：很高兴找到标准输入type="search"。
我的问题solution的评论中提出plain JS, HTML, CSS does exactly我在寻找什么。我仍然使用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; }

取决于用例和个人偏好。两种解决方案都很棒。

@God很好，你会非常友好地重写你的评论作为答案，s.t。我可以接受。

@Lloyd Banks，非常感谢您的解决方案，这对于搜索类型的输入字段非常有用。

注意

如果使用clearable以外的其他类，请记住可能存在冲突。

如何将删除/清除字段图标添加到输入字段

2 个答案:

注意