-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 プレースホルダー テキスト

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 や同様のライブラリを使用せずに同じことを行うと、さらに多くのコードを記述する必要があります。INPUT.auto-hint, TEXTAREA.auto-hint特に、きれいな CSS セレクターなどで表される DOM 要素を見つけるには、さらに多くの作業を行う必要があります。

上記のセレクターに一致する要素を見つけるには、おそらくドキュメント内のすべての要素をループする必要があります。これはメソッドinputを使用して見つけることができます。getElementsByTagName次に、それらの を確認する必要がありますclassName。一致するものが見つかった場合はgetAttribute、setAttribute、 などを使用して要素を変更します。その後、すべてのtextarea要素に対して同じことを行います。

この時点で、型とクラスに基づいて要素を特定する部分を抽出するリファクタリングの必要性が見え始めます。また、jQuery をミックスに追加することを再検討する必要があります ;)

于 2011-03-27T19:29:42.240 に答える
0

Jquery は驚くべきものです。本当にそうしたければ、コードをソースから切り取ることができます。jquery は js 開発者にとって優れたツールであり、jquery 自体を学習することは知っておくべきスキルです。また、jquery のライセンスが不明なため、コードの一部のみを配布/使用できない可能性があります。

于 2011-03-27T19:22:43.957 に答える