本质上,我的网页上有一个文本框,并且我试图像在iOS中那样添加“清除”按钮。我有一个正常的输入和一个img标签(带有重置按钮)。到目前为止,我已经使用CSS相对定位使它看起来像图像在文本框中。
我已将文本字段设置为使用javascript失去焦点(输入的onfocus/onblur)时将图像设置为消失。我有几个问题:
所以我想我不是最好的方法,我想知道我是否可以以某种方式更好地对输入和重置按钮进行分组(它们现在都在同一个位置)?当我在使用它时,有没有办法设置CSS的隐藏/消失?因此,就像使用input#searchbox:focus选择器一样,更改img#searchreset的属性
谢谢!
最佳答案
我为project I was working on创建了类似的东西。主要区别在于,出于可用性原因,图像始终可见。
对输入和按钮进行分组:
对于问题的第一部分,我采用的方法是使用父容器来容纳文本框和按钮。这将使您能够采用Apple在他们的搜索中所采用的方法。他们使用css Sprite (tutorial)代替了svg作为图像。如果您恰巧使用允许您“检查元素”的浏览器,则可以go to their site并查看他们的工作方式。
基本上,我建议将背景图像放在contains元素上,以使文本框和按钮看起来都好像在“图像内部”。然后,一旦文本框获得焦点,就可以通过CSS定位垂直移动背景图像,从而获得所需的外观。
隐藏/消失:
单独使用CSS进行隐藏和消失是不可能的。但是,您可以创建两个类,一个可以隐藏,另一个可以显示按钮。然后在javascript中,一旦文本框获得焦点,就可以将按钮的可见性设置为“可见”,并在模糊时将其设置为“隐藏”。
JS推荐:
您应该研究使用事件监听器(tutorial)而不是HTML属性来检测单击或按下。这是一种更清洁,更优雅的方法。在这里,我会说使用jQuery之类的框架会使事情变得简单得多。它使您可以设置事件监听器,而不必担心旧版浏览器和标准的各种实现。
希望这可以帮助。
关于javascript - 文本输入内的按钮-HTML,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/8620037/