Javascript 文本输入内的按钮-HTML

基本上，我的网页上有一个文本框，我正在尝试添加一个“清除”按钮，就像在iOS中一样。我有一个正常的输入和一个img标签（带复位按钮）。到目前为止，我已经使用CSS相对定位使图像看起来像是在文本框中

我使用javascript将图像设置为在文本字段失去焦点时消失（输入为onfocus/onblur）。我有几个问题：

onclick代码从不为img标记执行，因为当输入失去焦点时，它会立即消失。（已修复onmousedown，但我想要更优雅的解决方案）

我似乎无法使用document.getElementById（'searchbox'）.focus（）在单击后重新聚焦文本输入；（我检查了id是否正确）

所以我想我并不是在用最好的方法来做这件事，我想知道我是否能更好地组合输入和重置按钮（它们现在都在同一个li中）？当我这么做的时候，有没有办法用CSS设置隐藏/消失？与输入#searchbox:focus selector一样，更改img#searchreset的属性

---

谢谢

您不能使用javascript框架吗？如果可以，您可以使用jquery，例如，有许多插件可以做到这一点

以下是一个教程：

---

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

一些代码会很有帮助。我也很清楚。你想让你的文本区域有一个背景图像吗？

我为一个。主要区别在于，出于可用性原因，图像始终可见

将输入和按钮分组： 对于问题的第一部分，我采用的方法是使用父容器来保存文本框和按钮。这将允许您采用苹果搜索的方法。他们对图像使用css sprite（）而不是svg。如果您碰巧使用了允许您“检查元素”的浏览器，您可以查看他们是如何进行检查的

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

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

JS建议： 您应该研究使用事件监听器（）而不是HTML属性来检测您的点击或按下。这是一种更干净、更优雅的方法。这就是我要说的，使用像jQuery这样的框架将使事情变得更容易。它允许您设置事件侦听器，而不必担心传统浏览器和标准的各种实现

---

希望这能有所帮助。

您最好将目前掌握的代码发布到