javascript - ユーザーが入力/消去したときにテキスト フィールドのプロンプトを非表示/再表示する

Question

検索バーでこのような効果を出す方法を知っている人はいますか: https://www.dropbox.com/help

<input type="text" name="input">

テキストが動的に消えたり現れたりする onFocus および onBlur 効果を意味します。

ありがとうございます！

Answer 1

color プロパティで CSS アニメーションを使用します。

main.cssからの抜粋:

.sick-input.focused label{ color:#ccc;transition:color .2s linear 0;
                           -webkit-transition:color .2s linear 0;
                           -moz-transition:color .2s linear 0 }

---

:focus前述の定義を使用して、入力フィールドで疑似セレクターを使用して効果を模倣できます。

---

何らかの理由で私が十分に明確ではなかった場合:)

http://jsfiddle.net/d9CMR/

---

より堅牢なソリューション:

http://jsfiddle.net/d9CMR/3/

---

更新（適切な色の変更あり）：

http://jsfiddle.net/d9CMR/6/

---

ソース：

HTML

<input type="text" name="input" data-default="fubar">​

CSS

input { color:#333; }    
input:focus { color:#ccc;transition:color .2s linear 0;
              -webkit-transition:color .2s linear 0;
              -moz-transition:color .2s linear 0 }
input.typing { color:#333; }​

脚本

$(function(){
    var input = $('input[name="input"]'),
        defaulttext = input.attr('data-default');

    input.val(input.attr('data-default'));

    input.on('focus', function(){
        if(input.val() != defaulttext)
            input.addClass('typing');
        else
            input.removeClass('typing');

    }).on('keydown', function(){        
        if(defaulttext == input.val()) input.val('');

        input.addClass('typing');
    }).on('blur', function(){
        if(input.val() == '') input.val(defaulttext);

        that.removeClass('typing');
    }); 
});

Answer 2

これを試してください - Dropbox サイトの HTML と CSS を使用しました ....

HTML :

<div class="sick-input" id="anonymous_element_3">
    <label for="search-input">Type your question here</label>
    <input type="text" id="search-input" name="search_string" value="" tabindex="1">
</div>

CSS :

.sick-input label {
    font-size: 16px;
    position: absolute;
    left: 8px;
    top: 6px;
    cursor: text;
    pointer-events: none;
    color: #777;
}

.sick-input.populated label {
    display: none;
}
input {
    border-radius: 3px;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    -moz-box-shadow: 0 0 0 #000, inset 0 3px 3px #eee;
    -webkit-box-shadow: 0 0 0 #000, inset 0 3px 3px #eee;
    box-shadow: 0 0 0 #000, inset 0 3px 3px #eee;
    font-size: 16px;
    border: 1px solid #BFBFBF;
    padding: 5px;
    width: 500px;
}
.sick-input.focused label {
    color: #ccc;
    transition: color .2s linear 0;
    -webkit-transition: color .2s linear 0;
    -moz-transition: color .2s linear 0;
}

JavaScript :

$('#search-input').keyup(function() {
    if ($(this).val() === '') {
        $('.sick-input').removeClass('populated');
    } else {
        $('.sick-input').addClass('populated');
    }   
})

$('#search-input').focus(function() {
    $('.sick-input').addClass('focused');
});

$('#search-input').blur(function() {
    $('.sick-input').removeClass('focused');
});

作業例はこちら

Answer 3

次に例を示します。

HTML

<div>
    <label for="search">Search this site</label>
    <input type="text" id="search" placeholder="Search this site" />
</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; }

Javascript

$('input').on('keydown keypress keyup', function(e) {
    if($('input').val() == '') {
        $('div').removeClass('populated');
    }
    else {
        $('div').addClass('populated');
    }
});

placeholder属性を使用したくない場合は、これを使用します。

HTML

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

Javascript

$('input').on('keydown keypress keyup', function(e) {
    if($('input').val() == '') {
        $('div').removeClass('populated');
    }
    else {
        $('div').addClass('populated');
    }
}).on('focus', function(e) {
    var $this = $(this);
    if($this.val() == $this.data('placeholder')) {
        $this.val('');
    }

}).on('blur', function(e) {
    var $this = $(this);
    if($this.val() == '') {
        $this.val($this.data('placeholder'));
    }    
}).data('placeholder', $('input').val());

フィールドvalueの属性を使用したくない場合は、これが役立つ場合があります。input

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

Answer 4

高さまたは幅がわかっている場合は、目的のテキストを含む背景画像スプライトを入力フィールドに設定し、onfocusイベントとonblurイベントの背景位置を調整することもできます。

Answer 5

同様の効果を持つ html5 placeholder="" 属性を使用することもできます。

古いブラウザーには jquery フォールバックを使用します: https://github.com/mathiasbynens/jquery-placeholder

Answer 6

これを試すことができますか

Javascript コード

function txtblur()
{
    document.getElementById('txtval').value="";
}
function textblur()
{
    document.getElementById('txtval').value="Enter word to search";
}

HTML テキスト ボックス コード

<input type="text" class="tbct" name="txtval" id="txtval" value="Enter word to search" onfocus="txtblur()"/>