-1

转换它的目的是让我可以了解它是如何在没有 jquery 的情况下完成的。

<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.1.min.js"></script>
<script type="text/javascript">
    $(document).ready(function(){
        //  Focus auto-focus fields
        $('.auto-focus:first').focus();

        //  Initialize auto-hint fields
        $('INPUT.auto-hint, TEXTAREA.auto-hint').focus(function(){
            if($(this).val() == $(this).attr('title')){
                $(this).val('');
                $(this).removeClass('auto-hint');
            }
        });

        $('INPUT.auto-hint, TEXTAREA.auto-hint').blur(function(){
            if($(this).val() == '' && $(this).attr('title') != ''){
                $(this).val($(this).attr('title'));
                $(this).addClass('auto-hint');
            }
        });

        $('INPUT.auto-hint, TEXTAREA.auto-hint').each(function(){
            if($(this).attr('title') == ''){ return; }
            if($(this).val() == ''){ $(this).val($(this).attr('title')); }
            else { $(this).removeClass('auto-hint'); }
        });
    });
</script>
</head>
<body>
<form>
Email: <input type="text" name="email" id="email" title="i.e. me@example.com" class="auto-hint" />
</form>
</body>
</html>

我在这里找到了这段代码： Html placeholder text in a textarea form

4

3 回答 3

2

干得好：

(function() {
    var clss= 'auto-hint',
        fields = document.getElementsByClassName(clss),
        field;

    for (var i = 0; i < fields.length; i++) {        
        field = fields[i];
        field.value = field.title;

        field.onfocus = function() {
            if (this.value === this.title) {
                this.value = '';
                this.className = '';
            }
        };

        field.onblur = function() {
            if (this.value === '') {
                this.value = this.title;
                this.className = clss;
            }
        };
    }
})();

现场演示：http: //jsfiddle.net/pj5tG/

顺便说一句，HTML5 引入了该placeholder属性。它完成了完全相同的工作。但是，它在 IE 中不起作用（但它在 Firefox、Chrome、Safari 和 Opera 中起作用）。

<input type="text" placeholder="Name">

现场演示：http: //jsfiddle.net/pj5tG/1/

于 2011-03-27T19:40:47.017 回答
0

Jquery 是惊人的，如果你真的想你可以从他们的源代码中删除代码。但是我不推荐，jquery对于js开发者来说是一个很棒的工具，而学习jquery本身就是一个你应该知道的技能。另外，我不知道 jquery 的许可证是什么，因此您可能无法仅分发/使用他们的代码部分。

于 2011-03-27T19:22:43.957 回答
0

做同样的事情，不使用 jQuery 或类似的库，你将需要编写更多的代码。特别是，您将不得不做更多的工作来找到由整洁的 CSS 选择器INPUT.auto-hint, TEXTAREA.auto-hint等表示的 DOM 元素。

要找到与上述选择器匹配的元素，您可能需要遍历input文档中的所有元素——可以使用getElementsByTagName方法找到。然后，您需要查看它们的className，如果找到匹配项，请使用getAttribute,setAttribute等来修改元素。之后，对所有textarea元素执行相同的操作。

此时，您应该开始看到需要进行重构，提取基于类型和类定位元素的部分。此外，您现在应该重新考虑将 jQuery 添加到组合中；）

于 2011-03-27T19:29:42.240 回答