文本输入内的按钮 - HTML

Question

基本上我的网页上有一个文本框,我正在尝试添加像iOS一样的"清除"按钮.我有一个普通的输入和一个img标签(带有重置按钮).到目前为止,我已经使用CSS相对定位使其看起来像图像在文本框内.

当使用javascript文本字段失去焦点(输入的onfocus/onblur)时,我将图像设置为消失.我有一些问题:

1. onclick代码永远不会对img标记执行,因为当输入失去焦点时它会消失.(用onmousedown修复,但我想要一个更优雅的解决方案)

2. 点击后,我无法使用document.getElementById('searchbox')重新聚焦文本输入.focus(); (我检查了id是否正确).

所以我想我没有这样做的最佳方式,我想知道如果我能以某种方式组输入和复位按钮更好(他们都在同里现在)？虽然我在这里,有没有办法用CSS设置隐藏/消失？因此,与输入#searchbox:焦点选择器一样,更改img#searchreset的属性

谢谢!

Answer 1

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

对输入和按钮进行分组：

对于问题的第一部分，我采取的方法是使用父容器来容纳文本框和按钮。这将使您能够采用苹果公司的搜索方法。他们使用 css sprite（教程）而不是 svg 作为图像。如果您碰巧使用允许您“检查元素”的浏览器，您可以访问他们的网站并查看他们是如何做到这一点的。

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

隐藏/消失：

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

JS推荐：

您应该考虑使用事件侦听器（教程）而不是 HTML 属性来检测您的点击或按下。这是一种更干净、更优雅的方法。我想说的是，使用像 jQuery 这样的框架会让事情变得更容易。它允许您设置事件侦听器，而不必担心旧版浏览器和标准的各种实现。

希望这可以帮助。