使用javascript/jquery将字符固定到文本输入框

我正在寻找一种方法，将美元符号$“固定”到文本输入框中，例如

，但不可能删除默认值，这样无论用户输入什么，都会有一个$symbol“prepending”输入

---

干杯

有可能是背景图像，但它很难维护，而且对字体大小的变化没有反应，这使得它在我看来不是最佳选择

我认为更好的方法是：

• 在输入旁边放置一个

  $

  （实际上是在输入之前）

• 给它

  位置：相对；左：20px

• 然后，$符号移动到输入字段中

• 然后，输入字段

  左填充：24px

• 瞧！$符号位于输入字段中，不会模糊任何内容，并且无法删除

---

这只是一种视觉效果吗？如果是的话，你可以将CSS作为背景图像应用到输入中

---

之后，在服务器上，您可以使用该值做任何您想做的事情（例如，在它前面加上$）。

扩展Pekka的答案，我在我的页面上使用了它，但我使用jQuery实现了一点自动化。所以在这个例子中，我想在所有的输入字段中加一个$symbol，我给它们一个“cost”类

CSS:

.成本{
位置：相对位置；
左：20px；
}
投入成本{
左侧填充：24px；
}

jQuery：

$（文档）.ready（函数（）{
$（“#lcce表单输入.成本”）.wrap（“”）；
美元（“#lcce表单输入.成本”）。之前（“”）；
});

这将在输入之前放置一个包含“cost”类的范围，并在输入和范围周围加上一个div，以确保它们位于同一行

如果没有jQuery，可以从以下位置获取：

现在我有一个快速的问题-我注意到在IE6、7和8中，使用这种样式时，$符号没有正确排列。有没有人能解决这个问题

---

谢谢大家!

我也一直在寻找不同的解决方案。使用css缩进带有填充的文本并在该位置放置背景图像是最好的选择。

我这样做：

$('#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();
  }  
});

使用

---

如果用户愿意，可以手动删除美元符号。

这是一种视觉效果，让人们知道输入将采用美元格式，例如$22.00检查我的支票

<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/>

$('#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();
  }  
});