2

フォームの入力フィールドをクリックすると、「ヒント」のように見えるスパンを表示/非表示にする 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/を提供します

4

3 に答える 3

1

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

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

例えば：

あなたのコード

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

jQuery

$("input").each(function() { ... });
于 2012-01-21T11:43:40.907 に答える
1

コード行を置き換えてみてください：

if(span instanceof HTMLSpanElement) {

次の場合：

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

http://jsfiddle.net/eZnYY/3/デスクトップ Safary および Android ブラウザー (エミュレーター) で確認済み

于 2012-01-21T12:12:50.250 に答える
0

私が理解できないのは、jquery を使用している場合、関数でそれを活用しないのはなぜですか? jquery を使用してイベントをアタッチする場合、それらは Webkit および他のすべてのブラウザーで動作することを保証します。

于 2012-01-21T11:46:56.890 に答える