文本输入内的按钮 - HTML答案

【问题标题】：Button inside text input - HTML文本输入内的按钮 - HTML
【发布时间】：2012-01-27 01:09:57
【问题描述】：

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

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

onclick 代码永远不会为 img 标签执行，因为它会在输入失去焦点时立即消失。（用 onmousedown 修复，但我想要一个更优雅的解决方案）
点击后我似乎无法重新聚焦文本输入，使用 document.getElementById('searchbox').focus(); （我检查了 id 是否正确）。

所以我认为我这样做不是最好的方法，我想知道我是否可以更好地对输入和重置按钮进行分组（它们现在都在同一个 li 中）？当我在做的时候，有没有办法用 CSS 设置隐藏/消失？所以和 input#searchbox:focus 选择器一样，改变 img#searchreset 的属性

谢谢！

【问题讨论】：

【解决方案1】：

我为project I was working on 创建了类似的东西。主要区别在于，出于可用性原因，图像始终可见。

对输入和按钮进行分组：

对于您问题的第一部分，我采用的方法是使用父容器来保存文本框和按钮。这将允许您采用 Apple 的搜索方法。他们使用 css sprite (tutorial) 而不是 svg 作为图像。如果您碰巧使用允许您“检查元素”的浏览器，您可以go to their site 看看他们是如何做到的。

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

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

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

希望这会有所帮助。

【讨论】：

【解决方案2】：

一些代码会有所帮助。我也很清楚。你想让你的 textarea 有一个背景图片吗？

【讨论】：

【解决方案3】：

你不能使用 javascript 框架？如果可以，您可以使用 jquery，例如，有很多插件可以解决问题...

这是一个教程：

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

【讨论】：