文本输入内的按钮 - HTML

Question

基本上我的网页上有一个文本框，我试图添加一个＆＃34; clear＆＃34; iOS中的按钮。我有一个普通的输入和一个img标签（带有重置按钮）。到目前为止，我已经使用CSS相对定位使其看起来像图像在文本框内。

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

1. onclick代码永远不会对img标记执行，因为当输入失去焦点时它会消失。 （用onmousedown修复，但我喜欢更优雅的解决方案）

2. 使用document.getElementById（＆＃39; searchbox＆＃39;），我无法在点击后重新调整文本输入.focus（）; （我检查了id是否正确）。

所以我认为我没有以最好的方式做到这一点，我想知道我是否能以某种方式更好地分组输入和重置按钮（它们都是在同一个li中马上）？虽然我在这里，有没有办法用CSS设置隐藏/消失？因此，与输入#searchbox：焦点选择器一样，更改img＃searchreset

的属性

谢谢！

Answer 1

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

这是一个教程：

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

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

Answer 2

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

Answer 3

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

对输入和按钮进行分组：

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

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

隐藏/消失：

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

JS推荐：

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

希望这有帮助。