javascript - 为什么这适用于除 Opera 之外的所有其他浏览器？

Question

我正在使用一个脚本，它用您想要的任何图像替换通常的文件上传输入，然后使用 JS 确保每当鼠标移到您想要的图像上时鼠标指针下方有一个不可见的“浏览”按钮使用。

它适用于 ie7 ie8 ie9 Firefox、Safari、Chrome 但不适用于 Opera。在 Opera 上，出现常规文件输入。

我知道有很多脚本可以做类似的事情，但要么它们太复杂以至于我无法弄清楚如何使用它们(例如上传)，要么它们做类似的事情但效果不佳 - 比如制作自定义图像与文件输入的大小相同(这也有问题)。

Here's the script I'm using - 没有什么可说的

为什么它在 Opera 中不起作用。无论如何要修复它？除了不在 Opera 中工作之外，这非常适合我想要的。

Answer 1

有趣的案例，显示了一个我不知道的 Opera 布局错误:如果移动不透明度设置为 0 的文件输入，以便输入的文本区域部分在父级之外，输入将变得可见。我将报告此问题的错误并跟进。

要解决此问题并使脚本正常工作，您可以这样做:

1. 首先删除或更改禁用脚本的 Opera 嗅探。找到这个:

   如果(window.opera ||

   并删除 window.opera || 。

2. 添加一个小的解决方法，该方法将更改文件输入的位置，并避免将其放置在太靠左的位置以致文本区域部分被隐藏且不透明度被忽略。在此之前:

   this.file.style.left = x - (w - 30) + 'px';

   添加这一行:

   if(window.opera && parseFloat(opera.version())>11.50 && (x-(w-30)<0))w=w/2;

我已将其限制为仅在 Opera 中运行，并且仅在 11.50 及更高版本中运行。原因是如果您单击“文本输入”部分，大多数旧的 Opera 版本不会打开文件对话框。因此，在低于 11.50 的 Opera 版本中，您将获得错误的显示(但该功能可以正常工作)。

我希望这可以帮助您解决该错误。我不知道它是否面向 future 。文件输入将来可能会发生一些变化。