如何在文本框中保留文本，即使在焦點按下並在按下按鍵時刪除？

Question

我知道我可以使用placeholder="some text here..."，但是如何使它在按鍵而不是焦點上移除文字？ 是否有可能使用CSS或如何使用jQuery實現它？

Answer 1

如果你想一個通用的解決方案，讓您輕鬆地考慮任何默認文本值，可以考慮這種解決方案：

http://jsfiddle.net/KM43e/

用的「填充文本」一類名稱的所有投入將默認爲它們被初始化的文本，並且如果在字段中留下空文本則重置。

的JavaScript：

jQuery(function ($) { 

    // Removes the defualt text on key press 
    function keyDown (e) { 
     var input = $(e.target); 

     if (input && !input.data('data-entered')) { 
       input.data('data-entered', true); 
       input.val(""); 
     } 
    } 

    // Restore the default text if empty on blur 
    function blur(e) { 
     var input = $(e.target); 

     if (input && input.val() === "") { 
       input.data('data-entered', false); 
       input.val(input.data('blank-value')); 
     } 
    } 

    $('.populated-text').each(function() { 
     var input = $(this); 
     input.data('blank-value', input.val()); 
     input.data('data-entered', false); 
     input.keydown(keyDown); 
     input.blur(blur); 
    }); 

});​ 

例輸入：

<input type="text" value="Some text here..." class="populated-text"> 
<input type="text" value="Any default text you like" class="populated-text"> 
<input type="text" value="Will be used as empty" class="populated-text">​ 

Answer 2

像下面的jQuery應該工作。

$('#myElement').keypress(function() { this.val = ''; } 

Answer 3

使用Javacript：

<input type="text" onfocus="if(this.value == 'Your text'){this.value=''}" value='Your text' /> 

Answer 4

如果你在一個文本字段中的值和希望，只有當用戶輸入的文本框一鍵清除它，你可以這樣做：

$("#myTextfield").keypress(function() { 
    $(this).val(""); 
}); 

這下一位檢查用戶是否在文本字段中輸入了任何內容;如果不是，則在失去焦點時添加佔位符。

$("#myTextfield").blur(function() { 
    if($(this).val() === "") { 
     $(this).val("Search..."); 
    } 
}); 

Answer 5

它並不完美，但在這裏做像新的瀏覽器的佔位符是一個刺：

JS--

//when the input is clicked, select it's text so the cursor doesn't start typing in the middle of your placeholder text 
​$('input').on('click', function() { 

    //by selecting the input on click we mimic the focus event 
    $(this).select(); 
}).on('keyup', function() { 

    //if the input is un-touched 
    if (this.value == '' || this.value == '[Your Name]') { 

     //make the input in-active 
     this.className = ''; 

     //and make sure the placeholder is still showing 
     this.value = '[Your Name]'; 
    } else { 

     //since something has been entered into the input, add the active class to make the text black 
     this.className = 'active'; 
    } 
});​​​ 

CSS -

input { 
    color : grey; 
} 
​input.active { 
    color : black; 
}​ 

這使得輸入由d默認有灰色文本，當用戶輸入內容時，它會變成黑色。

HTML -

​<input type="text" value="[Your Name]" />​​​​​​​​​​​​​​​​​​​​​​​​​​​​ 

這裏是一個演示：http://jsfiddle.net/2VfwW/

您可以將您的佔位符添加到placeholder屬性，然後檢查該屬性的支持，如果它不存在您可以運行上面的代碼，但通過使每個輸入的值爲placeholder屬性的值開始：

$(function() { 

    //find all input elements with a placeholder attribute 
    $('input[placeholder]').val(function() { 

     //set the value of this input to the value of its placeholder 
     return $(this).attr('placeholder'); 
    }); 
});