使用 javascript/jquery 将字符修复为文本输入框答案

【问题标题】：Fix a character to text input box using javascript/jquery使用 javascript/jquery 将字符修复为文本输入框
【发布时间】：2011-01-14 04:13:41
【问题描述】：

我正在寻找一种将美元符号“修复”到文本输入框的方法，例如<input type="text" value="$" />，但不能删除默认值，因此无论用户输入什么，总有一个$ 符号“前置”输入。

干杯

【问题讨论】：

检查我的answer here

标签： javascript text input user-input

【解决方案1】：

background-image 是可能的，但它很难维护，并且不会对字体大小的变化做出反应，这使得它不是 IMO 的最佳选择。

我认为更好的方法是：

在输入旁边放一个<span>$</span>（实际上是在它之前）。
给它position: relative; left: 20px。
$ 符号然后移入输入字段。
然后，给输入字段padding-left: 24px。
瞧！ $ 符号在输入字段中，不会遮挡任何内容，也无法移除。

【讨论】：

【解决方案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 中，使用这种样式，$ 符号没有正确排列。有没有人可以解决这个问题？

谢谢！

【讨论】：

【解决方案3】：

这只是视觉效果吗？如果是，您可以将其与 CSS 一起应用为输入的背景图像。

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

【讨论】：

这是一个直观的东西，让人们知道输入将是 $ 格式，例如 $22.00

【解决方案4】：

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

【讨论】：

【解决方案5】：

我是这样做的：

$('#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">.

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

【讨论】：