jquery show tips関数がWebkitベースのブラウザで動作しない

Question

フォームの入力フィールドをクリックすると、 "ヒント"のようなスパンを表示/非表示にするjquery関数があります。あなたの便宜のために私のWebKitベースのブラウザ上

機能がFirfFox、クローム、IE上で素晴らしい作品（！）:)などしかし、すべてではない別名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/

Answer 1

試してみてください。次で

if(span instanceof HTMLSpanElement) { 

：

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

http://jsfiddle.net/eZnYY/3/は、あなたのコードが動作するデスクトップのChromeでデスクトップSafaryでとAndroidブラウザ（エミュレータ）

Answer 2

ブラウザ間の互換性を確保するために、jQueryメソッドを使用する必要があります（質問にjQueryタグがあります）。

これは純粋なjavascriptです。コードをjQueryに変換し、jQueryイベントを使用してCSSを設定します。例えば

：

あなたのコード

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

jQueryの

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

Answer 3

私は理解していないあなたはjqueryのを使用している場合、あなたはなぜ、ありますあなたの機能でそれを活用していないのですか？ jqueryを使用してイベントをアタッチする場合、Webkitや他のすべてのブラウザで動作します。あなたのコード行を置き換えるために