獲取佔位符消失/出現並將光標定位在前面

Question

我是JavaScript，jQuery和其他所有的初學者，所以當我看到HTML5支持佔位符時，我很滿意。也就是說，直到我想提高它的行爲。我正在試圖做的是採取什麼我在this post（特別是corresponding jsFiddle）瞭解到但修改它，以便：

• 當關注輸入字段，光標會自動進入到佔位符的開始你看不到它移動的方式。
• 當我開始輸入我的輸入字段（它（的時間量之後沒有），但隨後再次出現如果我刪除我在我的輸入字段中鍵入的佔位符消失。

我已經看到光滑的實現，正是我正在做的事情（特別是從Tubmlr和Square的主頁，以及Foursquare的「Join」頁面），並且希望能夠自己找到如何做到這一點。

The代碼來自我想修改/增強的上述jsFiddle：

$('.placeholder').each(function(){ 
    $(this).data('placeholder', $(this).attr('data-title')); 
    $(this).val($(this).attr('data-title')); 
}); 

$('.placeholder').live('keydown', function(){ 
    if ($(this).val() == $(this).data('placeholder')) { 
     $(this).val('');   
    } 
}); 

$('.placeholder').live('blur', function(){ 
    if ($(this).val().trim() == '') { 
     $(this).val($(this).data('placeholder')); 
    } 
}); 

任何人都可以幫我解釋一下嗎？

Answer 1

<style> 
form div { 
position:relative; 
} 
div label { 
    position:absolute; 
    top:0; 
    left:0; 
    color:#666; 
} 
div input { 
    background: transparent; 
} 
</style> 
... 
<script> 
$(document).ready(function() { 
    $('input').keyup(function() { 
    if ($(this).val().length) { 
     $('label[for='+$(this).attr('name')+']').fadeOut(); 
    } else { 
     $('label[for='+$(this).attr('name')+']').fadeIn(); 
    } 
    }); 
}); 
</script> 
... 
<form> 
<div> 
<label for="name">Name</label> 
<input id="name" name="name" /> 
</div> 
</form> 

http://jsfiddle.net/Pbn5K/4/

Answer 2

編輯 - 在我看來，Tumblr設置了一個背景圖像，其中顯示了文字（注意文字不可選）。因此，只需在輸入焦點時放入背景圖像，然後在模糊狀態下將其刪除即可。這不像js1568指出的那樣。這就是說，這是我在其他地方實施的方式。所提及的標籤方法看起來更容易，更直接。

$(your input selector here).focus(function(){ 
    $(this).css('background-image', 'url(background image with text in it.png)'); 
}); 

$(your input selector here).blur(function(){ 
    $(this).css('background-image', 'url(background image in different color with text in it.png'); 
}); 

當用戶開始輸入，他們更改背景圖片，所以你需要檢查，當他們打字，看它是否是空的輸入值 - 如果不是，刪除背景圖像：

$(your input selector here).keypress(function(){ 
    if ($(this).val() != "") { 
    $(this).css('background-image', ''); 
    } 
});