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>

我用 textarea 尝试过这样的事情，但它不起作用......

<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 之前添加了一个检查以查看“span”类是否属于“hint”。（只是这样你就不会隐藏不打算的东西！）
  • 我重构了 prepareHint 函数，以便它可重用于 SELECT、INPUT 和 TEXTAREA。
  • 我将处理准备提示的函数放在 IIFE 中，因为您很可能只会做这个。您可以在此处阅读有关 IIFE 的更多信息：http: //benalman.com/news/2010/11/immediately-invoked-function-expression/
  • 我没有直接对元素的样式进行样式操作，而是将它们移到了 CSS 类中。希望它应该更有意义......

这又是非 jQuery 版本 - 有更多改进空间，但希望这足以完成您的任务。

于 2012-12-15T13:29:03.000 回答