使用javascript / jquery將字符修復為文本輸入框

Question

我正在尋找一種方法來“修復”美元符號$到一個文本輸入框，例如<input type="text" value="$" />但是不能刪除默認值，所以無論如何在用戶輸入時，總會有一個$符號'prepending'輸入。

干杯

Answer 1

有background-image的可能性，但它很難維護，並且不會對字體大小的變化做出反應，這使得它成為IMO不太理想的選擇。

我的選擇更好的方法是：

• 在輸入旁邊放一個<span>$</span> （實際上在它之前）。

• 給它一個position: relative; left: 20px position: relative; left: 20px 。

• $符號然后移動到輸入字段。

• 然后，給輸入字段padding-left: 24px 。

• 瞧！ $符號位於輸入字段中，不會遮擋任何內容，也無法刪除。

Answer 2

擴展了Pekka的答案，我在我的頁面上使用了這個，但是我使用jQuery對它進行了一些自動化。 因此，對於此示例，我想要將$符號放入的所有輸入字段，我給它們一個“成本”類。

CSS：

<style type=&quot;text/css&quot; media="screen">
.cost{
    position: relative;
    left: 20px;
}
input.cost{
    padding-left: 24px;
}
</style>

jQuery的：

<script type="text/javascript">
$(document).ready(function(){    
    $("#lcce form input.cost").wrap('<div class=&quot;cost">');
    $("#lcce form input.cost").before('<span class="cost"></span>');
});
</script/>

這將在輸入之前將跨度與“成本”類放在一起，並且還在輸入和跨度周圍包含div，以確保它們位於同一行。

如果您沒有jQuery，可以從jQuery.com獲取它

現在我有一個簡單的問題 - 我注意到這個樣式，在IE6,7和8中，$符號沒有正確排列。 那里有人有解決方法嗎？

謝謝！

Answer 3

我是這樣做的：

$('#price').keypress(function(event) {
var code = (event.keyCode ? event.keyCode : event.which);
if ($(this).val().indexOf('$') === -1){
    document.getElementById("price").value = "$" + $(this).val();
  } else {
    document.getElementById("price").value = $(this).val();
  }  
});

用<input type="text" id="price"> 。

如果他/她想要，用戶可以手動刪除美元符號。

Answer 4

這只是視覺效果嗎？ 如果是，您可以將CSS作為背景圖像應用於輸入。

然后，在服務器上，您可以使用該值執行任何操作（例如，使用$前置）。

Answer 5

我也一直在尋找不同的解決方案。 使用css用填充縮進文本並將背景圖像放在該位置是最好的選擇。