使用 javascript/jquery 将字符修复到文本输入框

Question

我正在寻找一种方法将美元符号 $ 固定到文本输入框，例如 但使其不可能要删除的默认值，以便无论用户输入什么，总是有一个 $ 符号“前置”输入。

干杯

Answer 1

可以使用背景图像，但它很难维护，并且不会对字体大小的变化做出反应，这使得它在我看来不是最佳选择。

我认为更好的方法是：

• 在输入旁边放置一个 $ （实际上是在它之前）。

• 给它位置：相对；左：20px。

• $ 符号随后移入输入字段。

• 然后，为输入字段指定padding-left: 24px。

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

Answer 2

扩展 Pekka 的答案，我在我的页面上使用了它，但我使用 jQuery 对其进行了一些自动化。因此，对于这个例子，我想在所有输入字段中放入 $ 符号，我给它们一个“成本”类。

CSS：

<style type="text/css" 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="cost">');
    $("#lcce form input.cost").before('<span class="cost"></span>');
});
</script/>

这会将带有“cost”类的 Span 放置在输入之前，并且还会在输入和 Span 周围包裹一个 div，因此确保它们位于同一行。

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

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

谢谢你！

Answer 3

这只是视觉效果吗？如果是，您可以使用 CSS 作为输入的背景图像。

然后，在服务器上，您可以对该值执行任何您想要的操作（例如在其前面加上 $）。

Answer 4

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

Answer 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();
  }  
});

使用 。

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