使用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用填充缩进文本并将背景图像放在该位置是最好的选择。