0

この Java スクリプト関数を使用して、フォーム検証のヒントを表示します。この関数は入力要素で適切に動作しています..私の問題は、この関数をテキストエリア、選択ボックス、チェックボックスなどの他のフォーム要素で変更する必要があることです...どうすればこれを行うことができるか教えてもらえますか?

これは私が使用してきた機能です..

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";
            }
        }
    }
    // repeat the same tests as above for selects
    var selects = document.getElementsByTagName("select");
    for (var k=0; k<selects.length; k++){
        if (selects[k].parentNode.getElementsByTagName("span")[0]) {
            selects[k].onfocus = function () {
                this.parentNode.getElementsByTagName("span")[0].style.display = "inline";
            }
            selects[k].onblur = function () {
                this.parentNode.getElementsByTagName("span")[0].style.display = "none";
            }
        }
    }
}

これはHtmlです

<div>
    <label for="mobile">Mobile<img alt="required" src="images/required_star.png"> :</label>
    <input id="mobile" class="text" type="text" maxlength="10" name="mobile" title="Eg: 0714556260"/>
    <span class="hint">Use a 10 digits length number<span class="hint-pointer">&nbsp;</span></span>
</div>

私はテキストエリアでこのようなことを試みましたが、うまくいきません...

<div>
    <label for="qualification">Qualification Details<img alt="required" src="images/required_star.png">:</label>
    <textarea id="qualification" class="textarea" rows="4" cols="30" name="qualification"></textarea>
        <span class="hint">Describe about you<span class="hint-pointer">&nbsp;</span></span>

</div>
4

2 に答える 2

1 
$(document).ready( function() {
$(".hint").css({ "display":"none" });
$("input.hint_needed, select.hint_needed, textarea.hint_needed, radio.hint_needed").on("mouseenter", function() {
$(".hint").css({ "display":"inline" });
}).on("mouseleave", function() {
$(".hint").css({ "display":"none" });
});
});​

<textarea id="qualification" class="hint_needed" rows="4" cols="30" name="qualification"></textarea>

あなたはこれを使うことができます！

http://jsfiddle.net/QD3Hn/1/

于 2012-12-15T13:25:52.523 に答える
1

更新: OP の要求に従って、ホバー時にもヒントを表示できるようにします。

コードの非jQuery実装に基づいたものは次のとおりです:(JSFiddle: http://jsfiddle.net/E9njP/ )

<div>
    <label for="mobile">Mobile* :</label>
    <input id="mobile" class="text" type="text" maxlength="10" name="mobile" />
    <span class="hint">Use a 10 digits length number</span>
</div>
<div>
    <label for="qualification">Qualification Details*:</label>
    <textarea id="qualification" class="textarea" rows="4" cols="30" name="qualification"></textarea>
    <span class="hint">Describe about you</span>
</div>
<div>
    <label for="dropdown">Dropdown*:</label>
    <select id="dropdown"><option>A</option><option>B</option></select>
    <span class="hint">Hints for Select</span>
</div>

<!-- This is just for demo purpose -->
<div>
    <label>Tricky Input:</label>
    <input/>
    <span>Don't hide me! I am not a hint!</span>
</div>

... 要素に CSS を使用する代わりに、代わりに CSS を使用しています。ここにクラスがあります...

div span.hint {
    display: none;
}

div span.over,
div span.focus {
    display: inline;
}

...そしてここにjavascriptがあります...

(function() {
    // Since it's likely that you'll only ever run this function once 
    // (Once you attached the events, you'll probably never reuse this 
    // function again), I put it inside an IIFE to keep it "clean".

    /**
     * Toggle class on element without jQuery...
     *
     * @param {DOMElement} el Element to apply CSS to
     * @param {string} css CSS class name to be applied
     * @param {boolean} on Determine whether class name should be on the element or not
     **/
    function getHandler(el, css, on) {
        return function() {
            // If we want to add CSS to the element, and it doesn't exist on the
            // element yet, add it.
            if (on && el.className.indexOf(css) === -1) {
                el.className += ' ' + css;
            }
            // If we want to remove CSS from the element, and it exists, remove
            // it.
            else if (!on && el.className.indexOf(css) >= 0) {
                el.className = el.className.replace(css, '');
            }

            // NOTE This solution will lead to extra spacing in CSS name...
        };
    }

    function setHandler(inputEl, hintEl) {
        // the span exists!  on focus, show the hint
        inputEl.onfocus = getHandler(hintEl, "focus", true);
        inputEl.onmouseover = getHandler(hintEl, "over", true);

        // when the cursor moves away from the field, hide the hint
        inputEl.onblur = getHandler(hintEl, "focus", false);
        inputEl.onmouseout = getHandler(hintEl, "over", false);
    }

    function prepareHintsByTag(tag) {
        var inputs = document.getElementsByTagName(tag);
        for (var i=0; i<inputs.length; i++){
            // test to see if the hint span exists first
            if (inputs[i].parentNode.getElementsByTagName("span")[0]) {
                var hintEl = inputs[i].parentNode.getElementsByTagName("span")[0];

                // Show "hint" only if it has the class of "hint"
                if (hintEl.className.indexOf("hint") === 0) {
                    setHandler(inputs[i], hintEl);
                }
            }
        }
    }

    // Scan the code     
    prepareHintsByTag("input");
    prepareHintsByTag("textarea");
    prepareHintsByTag("select");
})();
    ​

コードにいくつかのことを追加しました...

  • デフォルトでは、ヒントはおそらく非表示になっているはずです。それをCSSのデフォルトにしました。
  • CSS を切り替える前に、「スパン」クラスが「ヒント」であるかどうかを確認するチェックを追加しました。（意図しないものを隠さないように！）
  • SELECT、INPUT、および TEXTAREA で再利用できるように、prepareHint 関数をリファクタリングしました。
  • 準備ヒントを処理する関数を IIFE に入れました。おそらくこれだけを行うことになるからです。IIFE の詳細については、こちらをご覧ください: http://benalman.com/news/2010/11/immediately-invoked-function-expression/
  • 要素のスタイルを直接操作する代わりに、それらを CSS クラスに移動しました。うまくいけば、もっと理にかなっているはずです...

これも非 jQuery バージョンです。改善の余地はまだありますが、うまくいけば、これで十分です。

于 2012-12-15T13:29:03.000 に答える