如何在HTML中移動占位符文本和文本框的內容？

Question

假設這是我的文本框：

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

並且用戶應該在內部輸入百分比，但是沒有%符號，只輸入數字（例如，67％中的67）。 但我希望他們仍然記得這是一個插入百分比的文本框。

那么如何將占位符與文本一起移動，使其無法刪除，始終在文本之后？

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

Answer 1

一種方法是使用一個額外的元素覆蓋輸入元素，並在用戶輸入時移動重疊的元素。

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

Answer 2

您可以使用javascript模擬輸入並更改實際輸入的寬度。 （訣竅是使用一些不可見的元素來捕獲所需的寬度）

使用JQuery的例子： http ： //jsfiddle.net/Vu7hN/

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