如何將佔位符文本和HTML文本框的內容一起移動？

Question

想這是我的文本框：

<input type="text" placeholder="%" /> 

和用戶應該進入裏面的百分比，但沒有跡象%，只有數字（例如67 67％）。但我希望他們仍然記得，這是一個插入百分比的文本框。

那麼，我怎樣才能將佔位符與文本一起移動，使其無法被刪除，總是在文本之後？

我也記得在某個地方看到它，除非我弄錯了事實。

Answer 1

做到這一點的一種方法是將一個附加元素覆蓋在輸入元素上，並隨着用戶的輸入移動覆蓋元素。

但是，我認爲更好的用戶體驗體驗是將元素作爲附加元素附加到輸入字段，如twitter引導中所示。請參閱「擴展表單控件」設置：

http://twitter.github.com/bootstrap/base-css.html#forms

Answer 2

你可以模擬輸入和改變使用JavaScript的實際輸入的寬度。 （訣竅是使用一些無形的元素來捕捉所需的寬度）使用

爲例JQuery的：

$input.on('change keypress paste focus textInput input', function(){ 
    testWidth.text($input.val()); 
    $input.width(testWidth.width()); 
});