1

私はJavaScriptが初めてなので、これを行う方法が正確にはわかりません。基本的に、私のウェブサイトには、特定の入力ボックスにカーソルを合わせると表示される一種のツールチップがあります。これは私のJavaScriptです：

function showTip () {
    firstnameTip.style.display = "inline";
}
function hideTip () {
    firstnameTip.style.display = "none";
}
/* link HTML elements to corresponding event function */
function init () {
    /* link the variables to the HTML elements */
    firstnameTip = document.getElementById("firstnameTip");
    firstname = document.getElementById("firstname");
    /* assigns functions to corresponding events */
    firstname.onmouseover = showTip; /* for mouse */
    firstname.onmouseout = hideTip;
    firstname.onfocus = showTip; /* for cursor on input field */
    firstname.onblur = hideTip; /* for cursor moving out */
}
/* execute the initialisation function once the window*/
window.onload = init;

基本的に私が望む機能は、「firstname」にカーソルを合わせると、firstnameTip が表示され、lastname (lastnameTip) などの他のものについても同様です。

単純な質問ですが、いろいろ試しましたがわかりません。誰にもアイデアはありますか？ありがとう。

4

3 に答える 3

3

設定方法は次のとおりです。

function showTip (tipElement) {
    return function () {
        tipElement.style.display = "inline";
    };
}

function hideTip (element, tipElement) {
    return function () {
        if (document.activeElement !== element) {
            tipElement.style.display = "none";
        }
    };
}

function init() {
    initTipEvents("firstname", "firstnameTip");
    initTipEvents("lastname", "lastnameTip");
}

function initTipEvents(elementId, tipId) {
    var el = document.getElementById(elementId),
        tip = document.getElementById(tipId),
        showHandler = showTip(tip),
        hideHandler = hideTip(el, tip);

    el.onmouseover = showHandler;
    el.onfocus = showHandler;

    el.onmouseout = hideHandler;
    el.onblur = hideHandler;
}

window.onload = init;

デモ: http://jsfiddle.net/LX2Cb/

は、要素とそのヒントのinitTipEventsに基づいて、必要なすべてのイベントをバインドし、変更されたと関数を再利用します。関数に追加のチェックを追加して、マウスが入力から離れたときにヒントが非表示にならず、まだフォーカスされていることを確認しました。ididshowTiphideTiphideTip

于 2013-05-15T05:06:32.513 に答える