テキストボックスに透かし文字を表示

テキストボックスが未入力のときに説明文などを表示し、入力を助けます。

サンプルコード

<!-- 透かし文字をvalue属性で設定する -->
<input type="text" id="textbox" value="数値を入力してください。" />


<script type="text/javascript">
<!--
  var textbox = document.getElementById( 'textbox' );

  // 入力フォーカスを得たときの処理
  textbox.onfocus = function()
  {
      if( this.value == this.defaultValue )
      {
          this.value = '';
          this.style.color = '';
      }
  }

  // 入力フォーカスを失ったときの処理
  textbox.onblur = function()
  {
      if( this.value == '' )
      {
          this.value = this.defaultValue;
          this.style.color = 'gray';
      }
  }

  // 透かし文字をdefaultValueプロパティで保持する
  textbox.defaultValue = textbox.value;
  textbox.value = '';

  textbox.onblur();
//-->
</script>

実行例

この方法の問題は、説明文と同一内容※1 を入力されると、フォーカスを失ったときにそれが消去されてしまうことです。この問題を回避するには、入力されているかどうかの判定を入力内容以外で行う必要があります。

※1 この実行例では「数値を入力してください。」と入力された場合

HTML5のplaceholder属性

HTML5がサポートされる環境ならば、placeholder属性で透かし文字を表示できます。このときJavaScriptは不要です。

<input type="text" placeholder="数値を入力してください。">
※HTML5がサポートされる環境でのみ動作します。

参考

JavaScriptのドキュメントから検索