0

私はこれを理解するのに何時間も費やしました.Stackoverflowで答えの一部を見つけましたが、まだこれを機能させることはできません.

私がやりたいのは、サイト全体のすべての入力要素を JS/jQuery で制御することです。ユーザーが入力に集中したとき、値がページが読み込まれたときと同じ場合はクリアし、変更されている場合はそのままにします。次にぼかしで、フィールドが空の場合、デフォルト値を返します。

私がこれまでに持っているのはこれです：

var input = document.getElementsByTagName('input');

$('input, textarea').focus(function() {
    value = $(this).val();

    for (var i=input.length-1; i >= 0; i--) {           
        if(value == input[i].value){
            $(this).attr("value","");   
        }   
    }
});
$('input, textarea').blur(function() {
    if($(this).val()=="") {
        $(this).val(value);
    }
});

これは部分的に機能しますが、入力が変更されたかどうかにかかわらず、入力をクリアし続けます。初期値を間違って保存していると思います。

4

6 に答える 6

4

この行は悪者です

if（value == input [i] .value）{

getElementsByTagNameはHTMLCollectionを返すため、domへの変更も入力変数に含まれます。したがって、値は常にinput [i] .valueになります。これは、同じ入力要素の値を取得するためです。もちろん、同じです。

jquery dataメソッドを使用して、要素内に値を保存します。ぼかした場合は、もう一度取得して比較します。

このような;

var handlers={
    focus: function() {
        var elm=$(this),
            value=elm.val(),
            old=elm.data("placeholder");
        if (typeof old==="undefined"){
            elm.data("placeholder", value);
            old=value;
        }
        if (old==value){
            elm.val("");
        }
    },
    blur:function() {
        var elm=$(this);
        if( elm.val() == "" ) {
            elm.val( elm.data("placeholder") );
        }
    }
};
$('input, textarea').each(function(i, elem){
    $(elem).
        focus(handlers.focus).
        blur(handlers.blur);
});
//not tested, should work!
于 2011-06-29T20:45:06.280 に答える
1

最初にデフォルト値を保存してから、ぼかしとフォーカスでそれを参照するだけです。

$('input, textarea').each(function() {
        var $this = $(this);
        $this.data('defaultValue', $this.val()); // stores the default value

        $this.focus( function() {
            if ($this.val() == $this.data('defaultValue')) { 
                $this.val(""); 
            }
        });

        $this.blur( function() {
            if ($this.val() == "") { 
                $this.val( $this.data('defaultValue') ); 
            }
        });
});

よく考えてみると、データ ストアも必要ないと思います。

$('input, textarea').each(function() {
        var $this = $(this),
            defaultValue = $this.val(); // stores the default value

        $this.focus( function() {
            if ($this.val() == defaultValue) { 
                $this.val(""); 
            }
        });

        $this.blur( function() {
            if ($this.val() == "") { 
                $this.val(defaultValue); 
            }
        });
});
于 2011-06-29T20:52:12.293 に答える
0

これは私が検索ボックスで使用するものです：

<input name="q" value="Search here ..." onfocus="if(this.value == 'Search here ...') this.value = '';" onblur="if(this.value == '') this.value = 'Search here ...';">

于 2011-06-29T20:45:50.380 に答える
0

@japrescott は正しいと思いますが、ブロック内に別の問題もあります。

$('input, textarea').blur(function() {
    if($(this).val()=="") {
        $(this).val(value);
    }
});

...変数valueはスコープで定義されていません。

于 2011-06-29T20:49:02.887 に答える
0

したがって、問題 1 - 入力のコレクションは参照によるものであるため、入力が更新されるとコレクションでも更新されるため、値は常にデフォルトのように見えます。

私がお勧めするのは、デフォルト値をそのように保存するのではなく、要素の一部として保存することです。ロード時に要素をループして、値を「デフォルト」属性に追加できます。また、より良いデフォルト属性サーバー側を追加することもできます。

このようなもの：

<input type='text' default='myval' value='myval'/>
var jInput = $('input');
if(jInput.val() == jInput.attr('default'))
...

私はあなたがその考えを理解すると確信しています。

于 2011-06-29T20:50:29.097 に答える
0

これですべてが完了します： http://jsfiddle.net/uUzY3/4/

$(function() {
    $("input").each( function () {
        $(this).data('initialValue', $(this).val());
    }).bind('focus', function() {
        if ($(this).val() == $(this).data('initialValue'))
            $(this).val("");
    });
});
于 2011-06-29T20:55:49.463 に答える