jquery 显示提示功能无法在基于 webkit 的浏览器中工作答案

【问题标题】：jquery show tips function fails to work in webkit based browsersjquery 显示提示功能无法在基于 webkit 的浏览器中工作
【发布时间】：2012-01-21 11:39:54
【问题描述】：

我有一个 jquery 函数，当我单击表单上的输入字段时，它会显示/隐藏看起来像“提示”的跨度。

该功能在 FirfFox、Chrome、IE(!) :) 等上运行良好。但在基于 webkit 的浏览器（即 Safari 和 Android）上则完全不适用（已测试）

$(function(prepareInputsForHints) {
var inputs = document.getElementsByTagName("input");
for (var i=0; i<inputs.length; i++){
    (function(i) {
        // Let the code cleane
        var span = inputs[i].nextElementSibling;

    if(span instanceof HTMLSpanElement) {

if(span.className == "hint") {


        span.onmouseover = function() { this.isOver = true; }
        span.onmouseout = function() { this.isOver = false; if(!inputs[i].isFocus)  inputs[i].onblur(); }

        // the span exists!  on focus, show the hint
        inputs[i].onfocus = function () {
            this.isFocus = true;
            span.style.display = "inline";
        }
        // when the cursor moves away from the field, hide the hint
        inputs[i].onblur = function () {
            this.isFocus = false;
            if(!span.isOver) span.style.display = "none";
        }
}        
    }
    })(i);
}
});

另外，为了您的方便，我为您提供http://jsfiddle.net/eZnYY/1/

【问题讨论】：

在桌面 Chrome 上，您的代码可以正常工作。只支持 IE9？

标签： javascript jquery input onblur hints

【解决方案1】：

尝试替换你的代码行：

if(span instanceof HTMLSpanElement) {

下一个：

if(span && span.tagName.toUpperCase()==="SPAN") {

http://jsfiddle.net/eZnYY/3/ 在桌面 Safary 和 Android 浏览器（模拟器）上检查

【讨论】：

【解决方案2】：

您应该使用 jQuery 方法来确保跨浏览器兼容性（您的问题有 jQuery 标签）。

这是纯 JavaScript。将您的代码转换为 jQuery，使用 jQuery 事件并设置 css。

例如：

您的代码

var inputs = document.getElementsByTagName("input");
for (var i=0; i<inputs.length; i++){ .. }

jQuery

$("input").each(function() { ... });

【讨论】：

【解决方案3】：

我不明白的是，如果您使用的是 jquery，为什么不在您的函数中利用它？我向您保证，如果您使用 jquery 附加事件，它们将在 webkit 和所有其他浏览器中工作。

【讨论】：