1

ボックス内をクリックすると削除され、変更せずに他の場所をクリックすると返される検索入力ボックスにヘルパーテキストを配置する次のコードがあります。

$('#search-form input[type="text"]').each(function(){
    var defaultVal = 'Category Search';
    $(this).focus(function(){
      if ($(this).val() == defaultVal){
        $(this).removeClass('active').val('').css('color', '#000');;
      }
    })
    .blur(function(){
      if ($(this).val() == ''){
        $(this).addClass('active').val(defaultVal).css('color', '#CCC');
      }
    })
    .blur().addClass('active');
});

しかし、ユーザーが入力ボックスをクリックせずに送信をクリックすると、サイトはヘルパー値を検索します (カテゴリー検索)。

私がする必要があるのは、送信時に値を確認し、そうであればCategory Search次のことを行うことです:

  • ヘルパー テキストを次のように変更しますPlease enter a category
  • フォームを送信しないでください。

これを試してみましたが、デフォルト値 (カテゴリ検索) が一緒に機能しなくなりました。

$('#search-form input[type="submit"]').click(function() {
    if ($(this).val() == "Category Search")
        //do stuff here
});​
4

6 に答える 6

2

HTML5プレースホルダーは、それをサポートするブラウザーに使用する必要があるものであり、それを削除するために記述するコードはありません。

それをサポートしていないブラウザのために、それを機能させるプラグインがたくさんあります。

そして、なぜサーバーのデフォルト値を無視しないのですか？それを除外するための論理的な場所のようです。

コードが失敗する理由は、フォームフィールドではなく、送信ボタンです。

$('#search-form input[type="submit"]').click(function() {
if ($(this).val() == "Category Search")  <-- this is the submit button, not the input
    //do stuff here
});​

入力を指すように変更する必要があります

$('#search-form').on("submit",function() {
    $('#search-form input[type="text"]').each( function() {
        //do comparison here, you could use defaultValue attribute
    } );
});​
于 2012-11-12T14:04:33.677 に答える
2

jsBin デモ

var defaultVal = 'Category Search';
var enterCat = 'Please enter a category';

$('#search-form input[type="text"]').each(function(){
  
    $(this).focus(function(){
      if ($(this).val() == defaultVal || $(this).val() == enterCat){
        $(this).removeClass('active').val('').css('color', '#000');
      }
    })
    .blur(function(){
      if ($.trim($(this).val()) === ''){
        $(this).addClass('active').val(defaultVal).css('color', '#CCC');
      }
    })
    .blur().addClass('active');
});

$('#search-form').submit(function(e) {
  
  if ( $(this).find('[type="text"]').val() === defaultVal){
    e.preventDefault();
    $(this).find('[type="text"]').prop('value', enterCat);    
  } 
  
});

空白の入力を検索する前にも$.trim()（空白）を使用してください:)

于 2012-11-12T14:23:13.190 に答える
1

を使用できない場合placeholder(使用できる場合は使用する必要があります)、フィールドをdisabled次のように設定するだけです。

$('#search-form input[type="submit"]').click(function() {
    if ($(this).val() == "Category Search") {
        $(this).prop('disabled',true);
    }
});​

このdisabled属性は基本的に、フィールドが「成功しない」ことを保証するため、サーバーに送信されません。

成功したコントロールは、送信に対して「有効」です。成功したすべてのコントロールには、送信されたフォーム データ セットの一部として、現在の値とペアになっているコントロール名があります。正常なコントロールは FORM 要素内で定義する必要があり、コントロール名が必要です。

でも：

  • 無効になっているコントロールは成功しません...

引用: http://www.w3.org/TR/html401/interact/forms.html#h-17.13.2 .

于 2012-11-12T14:05:48.190 に答える
1

を使用することに同意しplaceholderますが、これがあなたの質問に対する答えです。

$('#search-form input[type="submit"]').click(function() {
if ($('#search-form input[type="text"]') == "Category Search")
    $('#search-form input[type="text"]').val("Please enter a category");
    return false;
});​

個人的には、検索フィールドに既にあるテキストを変更するのではなく、検索フィールドの近くにエラー ボックスを作成します。そうしないと、「カテゴリを入力してください」という送信者に問題が発生します...

于 2012-11-12T14:05:58.433 に答える
1

送信ボタンの .val() を取得しようとしています

$('#search-form input[type="submit"]').click(function() {
   if ($('#search-form input[type="text"]').val() == "Category Search")
      //do stuff here
});​

ただし、おそらくフォーム自体のイベントを送信するようにフックする必要がありますが、それは実装が実際にどのように機能するかによって異なります。

 $('#search-form').submit(function() {
   if ($('#search-form input[type="text"]').val() == "Category Search")
      //do stuff here
});​
于 2012-11-12T14:07:09.647 に答える
0

はるかに簡単：ほとんどの新しいブラウザはこれを許可します：

<input type="text" placeholder="your prompt here" />

ただし、古いブラウザの場合は、次のように実行できます。

$(function() {
  if ($.browser.msie) {
    $('#search-form input[type="text"]').each(function(){       
      $(this).val($(this).attr("placeholder"));
    });
  }
  $("#search-form").on("submit",function() {
    var cnt=0,empty++;
    $("#search-form input[type='text']").each(function(){
      var box = $(this),val = box.val();
      if (val == box.attr("placeholder")){
        box.val("");
      }
      else {
        box.val($.trim(val));
      }
      if (box.val()=="") empty++;
      cnt++;
    });
    if (empty==cnt) return false;
  });
});
于 2012-11-12T14:04:31.960 に答える