0

ユーザーがフォームに入力したときにヒントを表示するために入力をクリックしたときに「スパン」を表示または非表示にするjavasccript関数があります。

function prepareInputsForHints() {
var inputs = document.getElementsByTagName("input");

for (var i=0; i<inputs.length; i++){
    // test to see if the hint span exists first
    if (inputs[i].parentNode.getElementsByTagName("span")[0]) {
        // the span exists!  on focus, show the hint
        inputs[i].onfocus = function () {
            this.parentNode.getElementsByTagName("span")[0].style.display = "inline";
        }
        // when the cursor moves away from the field, hide the hint
        inputs[i].onblur = function () {
            this.parentNode.getElementsByTagName("span")[0].style.display = "none";
        }
    }
}
}

私の問題は、ヒントテキストへのリンクを追加しようとすると、最初にonblurイベントに登録され、ヒントが消えるため、ユーザーがクリックできないことです。この関数を変更して、リンクが消えないようにする方法を知りたいのですが。ヒントをクリックすると非表示になります。

4

2 に答える 2

1

ブール変数を使用して、ユーザーがヒントの上にマウスを置いているかどうかをテストできます。onblur ではなく mouseOver の場合は、ヒントを非表示にします。

ループ内で次のようなもの：

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

        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);
}

variスコープを維持するためだけに自己実行関数を配置しました.onmouseout関数で問題はありません。

編集：例を更新しました

次のスパンを取得するためのコードは機能しないため、 nextElementSibling に変更しました。

于 2011-12-15T13:23:20.217 に答える
0

これは新しい作業コードです:

$(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);
}
});
于 2011-12-21T16:53:52.523 に答える