2

「プレースホルダー」属性を使用しています。入力フィールドのプレースホルダー テキスト用

IE 化身でもこの機能が必要です。

プレースホルダーを FOCUS で非表示にしたい! 私が見つけたすべての回避策は、最初のタイプが入力されたときにプレースホルダーを非表示にします。

私はそれを自分で解決することはできません。フォーカス時に入力のプレースホルダー テキストを削除するだけでなく、入力値が空の場合はぼかし時にそのプレースホルダー テキストを回復する必要があります。

これを機能させようとしています

jQuery(document).ready(function () {

jQuery('[placeholder]').focus(function() {
  input = jQuery(this);
  if (input.val() == input.attr('placeholder')) {
    input.val('');
    input.removeClass('placeholder');
    input.attr('placeholder','')
  }
}).blur(function() {
  var input = jQuery(this);
  if (input.val() == '' || input.val() == input.attr('placeholder')) {
    input.addClass('placeholder');
    input.val(input.attr('placeholder'));
  }
}).blur().parents('form').submit(function() {
  jQuery(this).find('[placeholder]').each(function() {
    var input = jQuery(this);
    if (input.val() == input.attr('placeholder')) {
      input.val('');
    }
  })
});


});

これにより、プレースホルダーの値が「（何もない）」に変更され、動作は希望どおりですが、ブラーでは「（何もない）」ため、プレースホルダーの値を回復できません

//アップデート

私のための解決策:

$(function()
{
  $('input').each(function() 
  {
     $(this).val($(this).attr('holder'));
  });

  $('input').focus(function()
  {
    if($(this).attr('holder')==$(this).val())
    {
      $(this).val('');
    }
  });
  $('input').focusout(function()
  {
     if($.trim($(this).val())=='')
     {
       var holder = $(this).attr('holder');
       $(this).val(holder);
     }
  });
    });
4

7 に答える 7

3

使用したくない場合はplaceholder、以下のコードを使用するか、この単純な jQuery プラグインを使用できます:

jQuery Placeholder。HTML

の下のコードのjsFiddleライブデモ

<input type='text' holder='First name'><br>
<input type='text' holder='Last name'><br>
<input type='text' holder='Age'>


JavaScript

$(function() {

  $('input').each(function() {
     $(this).val($(this).attr('holder'));
  });

  $('input').focus(function() {
    if($(this).attr('holder')==$(this).val()) {
      $(this).val('');
    }
  });

  $('input').focusout(function() {
     if($.trim($(this).val())=='') {
       var holder = $(this).attr('holder');
       $(this).val(holder);
     }
  });
});

また、この単純な jQuery プラグインを使用することもできます: jQuery Placeholder。

于 2013-01-15T14:35:07.577 に答える
3

placeholder 属性を使用します。

<input type="text" placeholder="Search here">

をサポートしていないブラウザの場合placeholder; ポリフィルを使用できます

于 2013-01-15T14:14:42.993 に答える
2

古くて最善ではない方法は次のとおりです。

<input type="text" name="fname" value="Enter text here" onFocus="if (this.value=='Enter text here'){this.value='';}"
onBlur="if (this.value==''){this.value='Enter text here';}" />

しかし、IE6でも動作します。

于 2013-01-15T14:35:38.313 に答える
2

Webkit ベースのブラウザーと Firefox では、純粋な CSS でプレースホルダーを非表示にできます。

input:focus::-webkit-input-placeholder, 
input:focus::-moz-placeholder { opacity:0; }
于 2013-01-15T15:07:09.523 に答える
0

それをサポートしていないブラウザにプレースホルダー機能を「追加」するポリフィルがいくつかあります。私は過去にjQueryプレースホルダーを使用しましたが、 modernizrドキュメントで言及されている他のかなりの数があります（プレースホルダーのセクションまでスクロールダウンしてください）。

jQueryプレースホルダーの良いところは、ライブラリへの参照以外のコードを変更/追加する必要がないことです。placeholder要素に属性を追加するだけです。

于 2013-01-15T14:27:12.717 に答える
0

入力とテキストエリアフォーカス（）でプレースホルダーテキストを非表示にする私のコードは次のとおりです。シンプルで素晴らしい作業。

$('textarea,input').focus(function(e){
    val=$(this).attr('value');
    if (!val)
    $(this).attr('value',' ');
    this.select();
}).blur(function(e){
    val=$(this).attr('value');
    if (val==' ')
    $(this).attr('value','');
});
于 2013-04-08T13:30:29.863 に答える