2

私はいつもこのスニペットを仕事で使用しています：

<input type="text" onblur="if (this.value=='') { this.value='your email'; }" onfocus="if (this.value == 'your email') { this.value=''; }" value="your email" />

基本的に、値として「your email」を含むテキストボックスが表示されます。テキスト入力ボックスをクリックすると、値が空白になります。したがって、メールを入力します。メールを入力しない場合は、にリセットされます。 「あなたのメール」。

textareaでこれまたは同様のことを行い、それをjQuery（jQueryの上記のコード）に変換したいですか？

<textarea name="msg">Message:</textarea><br />
4

5 に答える 5

3

これでうまくいくはずです：

入力とテキストエリアの両方で機能します-それぞれに設定したデフォルトはすべて保持されます。そのまま使用してください。

ここでフィドルを参照してください：http：//jsfiddle.net/leifparker/DvqYU/2/

（これにより、デフォルト値がプルされてデータ属性に格納されます）

HTML

<textarea>I love bananas ..</textarea>
<textarea>How about you?</textarea>
<input type="text" value="Time for a bath ..">
<input type="text" value=".. because I smell">

JS

$('textarea, input[type=text]')
    .each(function(){ 
        $(this).data('defaultText', $(this).val());
    })
    .focus(function(){
        if ($(this).val()==$(this).data('defaultText')) $(this).val('');
    })
    .blur(function(){
        if ($(this).val()=='') $(this).val($(this).data('defaultText'));
    });

編集：

ANevesによって提起され、HTML5プレースホルダー属性を利用する代替案を以下に示します。古いブラウザを気にしない場合は、プレースホルダーHTMLを単独で使用できます（ネイティブで動作し、上記のJSと同様の結果が得られます）。または、以下のように、JSフォールバックを追加する必要があります。

ここでフィドル：http：//jsfiddle.net/leifparker/DvqYU/14/

HTML

<textarea placeholder="A few words about yourself"></textarea>
<textarea placeholder=".. and a few more about your mangy cat."></textarea>
<input type="text" placeholder="Your Awesome City">
<input type="email" placeholder="rickastin@youjustgot.com">

JS

function hasPlaceholderSupport() {
  var input = document.createElement('input');
  return ('placeholder' in input);
}

if (!hasPlaceholderSupport()){
    $('textarea, input[type=text], input[type=email]')
        .each(function(){
            if ($(this).val()=='') $(this).val($(this).attr('placeholder'));
        })
        .focus(function(){
            if ($(this).val()==$(this).attr('placeholder')) $(this).val('');
        })
        .blur(function(){
            if ($(this).val()=='') $(this).val($(this).attr('placeholder'));
        });
}
于 2011-09-26T16:10:59.977 に答える
0

ネイティブhtml属性titleを使用してマスクテキストを指定し、次のスクリプトを適用します。

html

<input type="text" value="your email" title="your email" /> 
<input type="text" value="your name" title="your name" /> 
<textarea title="your description">your description</textarea>

JS

$('input[type=text], textarea').focus(function() {
    var $ctrl = $(this);
    var title = $ctrl.attr('title');
    $ctrl.removeClass('mask');
    if ($ctrl.val()== title) { 
      $ctrl.val(''); 
    }
}).blur(function() {
    var $ctrl = $(this);
    if ($ctrl.val().length == 0) { 
        var title = $ctrl.attr('title');
        $ctrl.val(title); 
        $ctrl.addClass('mask');
    }
});

この場合、コントロールにタイトルを指定するだけで済みます。

コード： http： //jsfiddle.net/pJrG9/7/

于 2011-09-26T16:00:20.410 に答える
0

テキストエリアと入力ボックスに適用される一般的なソリューションのデータ属性を使用できます-

HTML

<textarea name="msg" data-notext="text here">Message:</textarea><br />
<input id="email" type="text" data-notext="email here"/>

jQuery

$("textarea, input[type=text]").bind('focus blur', function() {
    if ($(this).val() == '') $(this).val($(this).data('notext'));
})

デモ-http://jsfiddle.net/3jwtA/

于 2011-09-26T16:02:56.327 に答える
0

私はあなたがこのようなプレースホルダーを参照していると思います：

http://andrew-jones.com/jquery-placeholder-plugin/

それが役に立てば幸い。

于 2011-09-26T16:03:18.367 に答える
0

これは私がそれをする方法です、それが役立つことを願っています。

HTML 

  <input type="text" value="Enter your email:" />   
  <textarea>Message:< /textarea>

脚本

    $("input[type=text]").focus(function(){
        if($(this).val() == "Enter your email:") $(this).val("");       
    }).blur(function(){
        if($(this).val() == "") $(this).val("Enter your email:");       
    });  

    $("textarea").focus(function(){
        if($(this).val() == "Message:") $(this).val("");        
    }).blur(function(){
        if($(this).val() == "") $(this).val("Message:");        
    });
于 2011-09-26T16:26:06.810 に答える