3

私はこれに数時間を費やしましたが、助けるものを見つけることができなかったので、タオルを投げました. 入力がフォーカスを失ったときにユーザーが入力ボックスをクリアして何も残さない場合、入力ボックスの以前の値を復元しようとしています。たとえば、入力ボックスに「ブリスベン、オーストラリア」と表示され、ユーザーがそのテキストを入力から削除してタブを押すと、入力を「ブリスベン、オーストラリア」に戻します。これが私のコードです：

$('input#search-location').on("focus", function() {
  $(this).data("previous-value", $(this).val());
}); 

$('input#search-location').on("blur", function() {
  if ($(this).val() == "") {
    // alert($(this).data("previous-value"));
    $(this).val($(this).data("previous-value"));
  }
});

両方のイベントが発生し、blur 関数でアラートのコメントを外すと、以前の値が正しく表示されます。しかし、入力ボックスには何も表示されず、コンソールにもエラーはありません。私が見逃しているのはばかげていると思います...助けていただければ幸いです！

4

1 に答える 1

4

あなたのコードは動作するはずで、ここでLive Demoを実行します

ページ要素がレンダリングされた後にコードを実行する必要があることに注意してください。

$(function() { ... });

ページがロードされたときのデフォルト値に設定したい場合は、代わりに試してください

ライブデモ

$('input#search-location').on("blur", function() {
  if ($(this).val() == "") {
    $(this).val(this.defaultValue);
  }
});

新しいブラウザでは、次のヒントが表示されます。

<input placeholder="Type your name" />

古いブラウザがそれをサポートするのを手伝うことができます

$(function() {
  if (!placeholderIsSupported) {
    $('#search-location1')
    .val($('#search-location1').attr("placeholder"))
    .on("blur", function() {
      if ($(this).val() == "") {
        $(this).val($(this).attr("placeholder"));
      }
    })
    .on("focus",function() {
      if ($(this).val()==$(this).attr("placeholder")) $(this).val("");
    });
  }  
});

function placeholderIsSupported() {
 var test = document.createElement('input');
 return ('placeholder' in test);
}
于 2013-07-10T11:19:44.580 に答える