使用 JS 将字符添加到文本字段中答案

【问题标题】：Use JS to add characters into textfield使用 JS 将字符添加到文本字段中
【发布时间】：2010-04-04 20:53:28
【问题描述】：

我想在用户输入文本字段之前添加一个 $ 符号，而不是在用户单击提交时实际提交 $。此外，我需要禁止用户在文本输入中输入除数值以外的任何内容。我知道 JQuery 输入掩码 (http://www.conetrees.com/2009/03/blog/jquery-masked-input-plugin-increase-usability-for-masked-format-input-fields)，但这个插件要求您设置用户应该输入的确切数字/字母数，这对我当前的项目没有好处。谁能想到一种方法来完成我上面描述的事情？

【问题讨论】：

标签： javascript html forms jquery-ui jquery-plugins

【解决方案1】：

一种方法是从输入中获取除美元之外的所有内容，并将其存储在隐藏字段中：

$("form").submit(function() {
    var total = $("#total").val();
    $("#hidden").val(total.replace("$", ""));
});

这是一个完整的工作解决方案（请记住，它可能需要完善才能适应现实世界）：

$("form").submit(function() {
    var total = $(".total").val();
    $("#hidden").val(total.replace("$", ""));
});
$("#total").keypress(function() {
    validateNumeric();
}).keyup(function() {

    // if the user has pressed backspace and removed the dollar, put it back
    if($(this).val() == null || $(this).val() == "") {
        $(this).val("$");
    }
});

function validateNumeric(evt) {
    var theEvent = evt || window.event;
    var key = theEvent.keyCode || theEvent.which;
    if(key == 8) {
        return true;
    }
    key = String.fromCharCode( key );
    var regex = /[0-9]/;
    if( !regex.test(key) ) {
        theEvent.returnValue = false;
        theEvent.preventDefault();
    }
}

测试标记：

<form>
    <input type="text" id="total" value="$"/>
    <input type="hidden" id="hidden"/>
    <input type="submit" value="Submit"/>
</form>

【讨论】：

但是，当用户在字段中输入一些文本时，我将如何显示字符？

【解决方案2】：

如果 $ 将一直存在，那么将它放在文本字段之前怎么样？

就我个人而言，我避免在像瘟疫这样的文本字段的值中插入无关的东西（单位、水印、诸如此类）。它们最终总是以不应该的方式被解释为实际内容。

【讨论】：

客户的“必须”要求之一是，一旦用户单击文本输入，$ 就会出现在字段中。我知道这完全是疯了。
另外，在表单的另一部分，客户希望将“sq.feet”附加到用户输入的末尾。
给你的客户一些理智。告诉他这与仅在单击字段标签时才显示字段标签相同，这是 Mystery Meat Navigation (en.wikipedia.org/wiki/Mystery_meat_navigation) 的一个令人讨厌的变体
我不知道该告诉你什么。他有这个迟钝的鸡尾酒餐巾纸模型，他想 100% 坚持下去，以及对网页设计的“如果我也愿意，我可以做到”的态度。你可以感谢 oDesk 的这种废话。
想法：在输入上放置左填充并在顶部覆盖一个带有$ 的跨度。然后它看起来像是输入的一部分，但不参与编辑。