javascript - HTML の空のテキスト

Question

ExtJS のように入力フィールドに emptyText に似たものを持たせる方法はありますか?

変更したCSSで値を設定してみました。しかし、値はフォームとともに送信され、入力フィールドをクリックしてもすぐに消えません。IE7 以降をサポートする必要がある

どんな助けでも大歓迎です。

Answer 1

あなたが探しているのはplaceholder.. W3School

<input type="text" placeholder="Hii" />

IE およびプレースホルダーをサポートしていない他のブラウザーの古いバージョンのポリフィルを見つけることができます。

プレースホルダーをサポートしていないブラウザーにこのコードを追加して、適切なブラウザーで動作するのと同じように動作させることができます..* JQuery が必要です

// This adds 'placeholder' to the items listed in the jQuery .support object. 
jQuery(function() {
   jQuery.support.placeholder = false;
   test = document.createElement('input');
   if('placeholder' in test) jQuery.support.placeholder = true;
});


// This adds placeholder support to browsers that wouldn't otherwise support it. 
$(function() {
   if(!$.support.placeholder) { 
      var active = document.activeElement;
      $(':text').focus(function () {
         if ($(this).attr('placeholder') != '' && $(this).attr('placeholder') != undefined && $(this).val() == $(this).attr('placeholder')) {
            $(this).val('').removeClass('hasPlaceholder');
         }
      }).blur(function () {
         if ($(this).attr('placeholder') != '' && $(this).attr('placeholder') != undefined && ($(this).val() == '' || $(this).val() == $(this).attr('placeholder'))) {
            $(this).val($(this).attr('placeholder')).addClass('hasPlaceholder');
         }
      });
      $(':text').blur();
      $(active).focus();
      $('form:eq(0)').submit(function () {
         $(':text.hasPlaceholder').val('');
      });
   }
});

Answer 2

Rajat の回答は正しいですが、HTML5 のみです。ライブラリを使用せずに純粋な javascript のみを使用して IE (および他のブラウザー) で機能する回答が必要な場合は、この質問を参照してください。