Question

我有一个文本框，我想在用户开始输入数字时包含一个£符号。

例如：£32

我该怎么做：

@Html.TextBox("amountFrom", "", new { @class = "form-control", @placeholder = "£" })

目前我只有一个占位符，在用户输入数字之前会加上“£”符号。我希望在用户开始输入后立即显示该标志。

Answer 1

快速而肮脏的修复方法是使用JavaScript或jQuery。当文本框发生变化时，会在文本框中已有的内容的前面添加£。

@Html.TextBox("amountFrom", "", new { @class = "form-control", @id="price" })

<script>
$(function() {
    $('#price').on('input',function() { 
        var price = $('#price').val();
        if (price.substring(0, 1) == '£')
        {
            price = price.substring(2);
        }

        $('#price').val('£ ' + price);
    });
});
</script>

请看这个小提琴：http://jsfiddle.net/49gdh95z/

稍微更好的解决方案可能是使用显示英镑符号背景图像的CSS，例如StackOverflow用于在其搜索框上显示放大镜图像。

可以在此处找到此示例的小提琴：http://jsfiddle.net/7pjm9v66/

请注意，第二个示例会在输入框中输入内容后立即添加井号（并且不会预先显示）。如果您希望始终显示井号，那么您当然可以省略JavaScript并将其直接应用的CSS移动到CSS中的#price元素。

格式化文本框以包含“£”

1 个答案: