0

テキストフィールドの用途を示すテキストをグレー表示した入力テキストフィールドを作成しようとしています。このテキストは、文字が入力されたときに削除する必要があります。

たとえば、Facebookで検索入力テキスト領域をクリックすると、文字を入力する前に「検索」という単語が表示されたままになります。

この機能が何と呼ばれるかわからないため、JQueryのどこから始めればよいかわかりませんが、以下は入力フィールドのマークアップです。

HTMLマークアップ

<div class="searchForm">
   <input id="searchInput" value="Search"  autocomplete="off" name="searchInput"   
      onkeyup="showResult(this.value)"/>
   <input type="hidden" name="searchSite" value="1" style="background-color:#000;">
   <input id="searchButton" type="submit" value=""/>
</div>
4

5 に答える 5

3

placeholder次のように html 5 属性を使用できます。

<input id="searchInput" type="text" placeholder="Search" name="searchInput" />
于 2012-05-25T21:26:29.430 に答える
2

これを行うにはいくつかの方法があります。HTML5 を使用すると、これはプレースホルダー属性を使用して簡単に実現できます。これにより、HTML 要素内のテキストを定義できます。フォーカスすると、これは消えます。

<input id="searchInput" value="Search"  autocomplete="off" name="searchInput" placeholder="Search"   
      onkeyup="showResult(this.value)"/>

これを行う JavaScript の他の方法は、フォーカスまたはクリックなどでテキストをクリアするメソッドを使用することです。

$('input#searchInput').focus(function() {
    $(this).value('');
});
于 2012-05-25T21:30:37.680 に答える
1

他の回答が示唆しているように、HTML5placeholder属性を使用することをお勧めします。これをサポートしていないブラウザの場合、次のようにサポートを追加できます。

// 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;
});

$(function() {
    // add placeholder support to browsers that wouldn't otherwise support it. 
    if (!$.support.placeholder) {
        var active = document.activeElement;
        $(':text,:password').focus(function() {
            if ($(this).attr('placeholder') != '' && $(this).val() == $(this).attr('placeholder')) {
                $(this).val('').removeClass('hasPlaceholder');
            }
        }).blur(function() {
            if ($(this).attr('placeholder') != '' && ($(this).val() == '' || $(this).val() == $(this).attr('placeholder'))) {
                $(this).val($(this).attr('placeholder')).addClass('hasPlaceholder');
            }
        });

        $(':text,:password').blur();
        $(active).focus();
        $('form:eq(0)').submit(function() {
            $(':text.hasPlaceholder,:password.hasPlaceholder').val('');
        });
    }
});​

このコードはここから発信されました：http ：//www.cssnewbie.com/example/placeholder-support/

パスワードフィールドをサポートするように変更し（ただし、*として表示されるだけです）、正常に使用しています。placeholderHTML属性を使用するだけで、すべてが全面的にうまく機能するので、私はそれが好きです。

お役に立てれば！

于 2012-05-25T21:45:05.070 に答える
1

これは私の別の答えからのものです。そして、これはこのコード片の実例です。

HTML

<div>
    <label for="search">Search this site</label>
    <input type="text" id="search" value="" />
</div>

CSS

body { padding: 20px; }

div { position: relative; }
div label { position: absolute; left: 8px; top: 4px; color: #666; z-index: 2; font: 11px arial; }
div input { position: absolute; padding: 3px 6px; border: 1px solid #ddd; border-radius: 2px; z-index: 1; font: 11px arial; }
.populated label { display: none; }
.focused label { color: #aaa; }

Javascript

$('input').on('keydown keypress keyup', function(e) {
    if($('input').val() == '') {
        $('div').removeClass('populated');
    }
    else {
        $('div').addClass('populated');
    }
}).on('focus', function(e) {
    $('div').addClass('focused');
}).on('blur', function(e) {
    $('div').removeClass('focused');
});
于 2012-05-25T21:29:51.393 に答える
1

HTML5 を使用している場合は、placeholder属性を使用する必要があります。

HTML4.01 または XHTML1.0 を使用している場合は、この質問の最終編集を参照してください: jQuery を使用しない入力の控えめな「デフォルト」テキスト(最後に jQuery を使用)

于 2012-05-25T21:30:55.527 に答える