文本输入框内的按钮 - HTML

Question

基本上，我在网页上有一个文本框，想要添加类似于iOS中的“清除”按钮。我有一个普通的输入框和一个img标签（带有重置按钮）。到目前为止，我已经使用CSS相对定位来使其看起来像图像在文本框内部。

我已经使用JavaScript将图像设置为在文本字段失去焦点时消失（在输入时使用onfocus/onblur），但是出现了一些问题：

1. img标记的onclick代码从未执行过，因为它会在输入框失去焦点时消失。（可以使用onmousedown解决，但我希望有更优雅的解决方案）
2. 无法通过document.getElementById('searchbox').focus()重新聚焦文本输入框（我已检查过id是否正确）。

所以，我认为我没有用最好的方式实现这个功能，我想知道能否更好地组合输入和重置按钮（它们现在都在同一个li中）。在此期间，是否可以使用CSS设置隐藏/消失？例如，在input#searchbox:focus选择器下，更改img#searchreset的属性。

谢谢！

- Raekye

---

最好您把目前的代码发布出来，最好是在jsfiddle上。 - ptriek

Answer 1

你不能使用JavaScript框架吗？如果可以的话，例如可以使用jQuery，有许多插件可以解决这个问题...

这里有一个教程：

http://viralpatel.net/blogs/2011/02/clearable-textbox-jquery.html

个人而言，我不喜欢这个“组件行为更改”手册，因为如果你将你的应用程序移植到移动设备上或者在一个默认包含此功能的浏览器中使用它，那么它看起来会很糟糕。

- rsan

Answer 2

提供一些代码可能会有所帮助。那么，我来确认一下。您想让文本区域具有背景图像？

- khollenbeck

Answer 3

我曾为一个正在进行的项目创建了类似的东西。主要区别在于出于可用性原因，图像始终可见。

对输入和按钮进行分组：

对于您问题的第一部分，我采取的方法是使用一个父容器来容纳文本框和按钮。这将允许您采取苹果公司在其搜索中所采取的方法。他们使用 css sprite（教程）而不是 svg 来显示图像。如果你使用的浏览器可以 "检查元素"，你可以 访问他们的网站 并看看他们是如何做到的。

基本上，我建议将背景图像放在包含元素上，以便文本框和按钮都看起来像是 "在图像内部"。然后一旦文本框获得焦点，您可以使用 CSS 定位垂直移动背景图像，从而获得所需的外观。

隐藏/消失：

仅使用CSS隐藏和消失是不可能的。但是，您可以创建两个类别，一个用于隐藏，另一个用于显示按钮。然后在JavaScript中，一旦文本框获得焦点，您可以将按钮的可见性设置为“visible”，在模糊时，将其设置为“hidden”。

JS建议：

您应该研究使用事件侦听器（tutorial）而不是HTML属性来检测单击或按下。这是一种更清洁和更优雅的方法。在这里，我会说使用像jQuery这样的框架会使事情变得更容易。它允许您设置事件侦听器，并不必担心遗留浏览器和标准的各种实现。

希望这有所帮助。

- Alex Morales