6

入力にフォーカスがあるときにプレースホルダーテキストを変更するための簡単な解決策はありますか？例えば：

<input type="text" placeholder="Join our mailing list!">

これになります：

<input type="text" placeholder="enter your email address...">

入力がアクティブな間。

4

3 に答える 3

21 
$('input').focus(function() {
    $(this).attr('placeholder', 'enter your email address...')
}).blur(function() {
    $(this).attr('placeholder', 'Join our mailing list!')
})

http://jsfiddle.net/ByLGs/

于 2012-09-21T17:51:20.027 に答える
2

あなたはこれに「jQuery」というタグを付けているので、あなたはそれを使用することにオープンであると思います。簡単な方法は次のとおりです。

<input type="text" placeholder="Join our mailing list!" title="enter your email address...">​

$('input').on('focus', function(){
    $(this).data('placeholder', $(this).attr('placeholder')); // Store for blur
    $(this).attr('placeholder', $(this).attr('title'));
}).on('blur', function(){
    $(this).attr('placeholder', $(this).data('placeholder'));
});​

デモ： http： //jsfiddle.net/m6j8m/

これは短縮される可能性がありますが、あなたはその考えを理解します。このように、JavaScriptの属性値を追跡する必要はありません。すべてHTMLであるため、万能のソリューションです。使用titleがニーズに合わない場合は、data-代わりに属性またはその他の属性を使用できます。

于 2012-09-21T17:53:28.227 に答える
0

カスタム属性「data」を使用して、コンテンツを交換できます。

<input type="text" placeholder="Join our mailing list!" data-focus-placeholder="enter your email address..." class="focus-placeholder">​

次に、フォーカスとフォーカスアウトの属性を交換するJavaScript関数が必要です

jQuery('.focus-placeholder').on('focus focusout',function(){

    focusPlaceholder    = jQuery(this).attr('data-focus-placeholder');
    placeholder         = jQuery(this).attr('placeholder');

    jQuery(this).attr('placeholder', focusPlaceholder);
    jQuery(this).attr('data-focus-placeholder', placeholder);
});

その他のデータ属性：https ：//www.w3schools.com/tags/att_global_data.asp

于 2019-04-26T17:25:12.783 に答える