javascript - 文本输入内的按钮 - HTML

Question

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

我已使用 javascript 将图像设置为在文本字段失去焦点(输入时为 onfocus/onblur)时消失。我遇到了一些问题:

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

2. 使用 document.getElementById('searchbox').focus(); 我似乎无法在单击后重新聚焦文本输入； (我检查过id是正确的)。

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

谢谢!

Answer 1

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

这是一个教程:

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

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