Question

下面的代码在IE，FF，Chrome和Safari中运行得很好，但是我想知道当缩放到很多用户时它实际上有多高效，以及屏幕阅读器/特殊需求用户/等是否可以访问它？具体来说，是否有更好的方法来编写jQuery，因此它使用较少的$（this）引用，这是否会导致使用任何性能损失？此外，将标签上的显示设置为无限制了使用屏幕阅读器的人的可访问性？我为此目的加载页面时添加了title属性，但这是否有帮助/这是一个好主意？另外，我知道如果禁用javascript这一切都没用，但只是想知道这里。

<html>
    <head>
        <title></title>
        <style type="text/css">
            fieldset {
                border: none;
                padding: 10px;
                width: 600px;
                margin-top: 5px;
            }

            label { 
                display: none;
            }

            input {
                width: 150px;
                margin: 5px;
                float: left;
                display: block;
            }

            br {
                clear: both;
            }
        </style>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
        <script type="text/javascript">
            $(document).ready(function() {
                GetInputLabels();
                $("input").focus(function() {
                    if ($(this).val() == $(this).prev("label").text()) {
                        $(this).val('').css("color", "#000");
                    }                   
                });
                $("input").blur(function() {
                    if ($(this).val() == '') {
                        $(this).val($(this).prev("label").text()).css("color", "#bbb");
                    } 
                });
                function GetInputLabels() {
                    $("input").each(function() {
                        var label = $(this).prev("label").text();
                        $(this).val(label).css("color", "#bbb").attr("title", label);
                    });
                }
            });
        </script>
    </head>
    <body>
        <form>
            <fieldset>
                <label for="fname">First Name</label>
                <input id="fname" type="text" /> <br/>

                <label for="lname">Last Name</label>
                <input id="lname" type="text" /> <br/>

                <label for="email">Email</label>
                <input id="email" type="text" /> <br/>
            </fieldset>
        </form>
    </body>
</html>

Answer 1

您的代码看起来没问题，但您可以缓存jQuery DOM元素，因此您不必过多地遍历DOM结构。您还可以链接事件以减少查找次数：

var input = $('input');
input.focus(fn).blur(fn)...

你也可以缓存这个以避免额外的jQuery调用：

var context = $(this);

如果要访问屏幕阅读器，则不应使用display:none隐藏。我建议使用lke position:absolute; left:-10000px;代替。

以下是您脚本的优化版本：

jQuery(function($) {

    var input = $('input');
    var GetInputLabels = function() {
        input.each(function() {
            var elem = $(this);
            var label = elem.prev('label').text();
            elem.val(label).css("color", "#bbb").attr("title", label);
        });
    }

    GetInputLabels();

    input.focus(function() {
        var elem = $(this);
        if (elem == elem.prev('label').text()) {
            elem.val('').css("color", "#000");
        }                                       
    }).blur(function() {
        var elem = $(this);
        if (elem.val() == '') {
            elem.val(elem.prev("label").text()).css("color", "#bbb");
        } 
    });
});

Answer 2

一件简单的事情是在匿名函数的开头设置var element = $(this);并使用此变量。这样可以避免多次查找。

对于屏幕阅读器，将标签设置为visibilty: hidden（或display: none）将阻止他们大声朗读。对于使用position:absolute解决方案的普通用户，正确的方法似乎将它们放在屏幕上。以下链接提供了有关该内容的更多信息：http://www.webaim.org/techniques/css/invisiblecontent/

Answer 3

您需要记住的一件重要事情是缓存DOM查询。您也可以将代码链接在一起。

var inputs = null;
function getInputs() {
    if (inputs == null) {
        inputs = $("input");
    }

    return inputs;
}


$(document).ready(function() {
    getInputs().each(function() {
        var elm = $(this);
        var label = elm.prev("label").text();
        elm.val(label).css("color", "#bbb").attr("title", label);
    }).focus(function() {
        var elm = $(this);
        if (elm .val() == elm .prev("label").text()) {
             elm .val('').css("color", "#000");
        }                                       
    }).blur(function() {
        var elm = $(this);
        if (elm.val() == '') {
            elm.val(elm.prev("label").text()).css("color", "#bbb");
        } 
    });
});

此jQuery / HTML代码中的性能/可访问性问题？

3 个答案: