0

placeholderjqueryのみを使用してすべてのブラウザーで機能するように、この問題の解決策を作成しています。

これまではうまく機能していました...これが私がどこまで来たかです

var formId = ["Name", "E-mail", "Subject", "Message"];
$.each(formId, function(i) {
    $("input, textarea").focus(function() {
        if ($(this).val() === formId[i])
            $(this).val("");
    }).focusout(function() {
        if ($(this).val() === "")
            $(this).val(formId[i]);
    });
});

フォーカスアウト部分まで完全に機能します。入力フィールドに焦点を合わせるとName、すべての入力フィールドに値が再入力されます。さまざまなソリューションを試してみましたが、これは私が得たものと同じくらい近いです。

4

2 に答える 2

1

これは、この問題に取り組む最善の方法ではないようです。以前、ブログで次のような解決策を見ました。プレースホルダー属性を入力に追加して、最新のブラウザーで動作するようにし、次のようなプレースホルダー属性を持つ入力に jQuery を追加します[placeholder]。

$('[placeholder]').focus(function() {
  var input = $(this);
  if (input.val() == input.attr('placeholder')) {
    input.val('');
    input.removeClass('placeholder');
  }
}).blur(function() {
  var input = $(this);
  if (input.val() == '' || input.val() == input.attr('placeholder')) {
    input.addClass('placeholder');
    input.val(input.attr('placeholder'));
  }
}).blur();

$('[placeholder]').parents('form').submit(function() {
  $(this).find('[placeholder]').each(function() {
    var input = $(this);
    if (input.val() == input.attr('placeholder')) {
      input.val('');
    }
  })
});

残念なことに、現在ブログを見つけることができません。このコードは、そのサイトから完全にコピーされたものであり、クロスブラウザーでうまく機能すると思います。

これがどのように機能し、なぜこれがより良いアプローチなのか:

すべての input 要素と textarea 要素にハンドラーを配置する代わりに、どの要素にハンドラーが必要か、つまりプレースホルダー属性を持つ要素を簡単にフィルター処理できます。

.submit()ハンドラーは、デフォルトのテキストが値としてポストされないようにします。

あなたのコードに問題があると私が感じていることについて話す必要があるかもしれません：

each 関数を使用して、非常によく似た複数のフォーカス ハンドラーを呼び出しています。each 関数はおそらく必要ありません。各入力にハンドラーが追加されるため、 $('input, textarea').focus() を使用できます。次に、かどうかを確認できます$.inArray($(this).val(),formId)。inArray()のドキュメント。

于 2013-02-08T16:42:26.853 に答える
0

を忘れてvar formId、代わりに、input/textarea html タグに属性 data-placeholder を適切な値で追加してから、次のようにします。

 $("input, textarea").on({
    focus : function() {
      var $t=$(this);
      if ($t.val() ===$t.data("placeholder"))
        $t.val("");
    }, 
    blur : function() {
      var $t=$(this);
      if ($t.val() === "")
        $t.val($t.data("placeholder"));
    }
});
于 2013-02-08T16:43:40.417 に答える