在 jquery 或 javascript 中动态设置输入类型文本框的长度

Question

在输入类型文本框中获取最多 13 个数字，但如果用户按十进制形式输入 14 个数字，那么它应该最多允许 16 个数字。

HTML：

<input type="text" maxlength="15" onkeyup="checkCurrency(this)"/>

脚本：

    function checkCurrency(ctrl) {
        ctrl.setAttribute('maxlength', '16');
        var currency = ctrl.value.replace(/[,]+/g, '');
        var valid = /^\d{0,13}(\.\d{0,2})?$/.test(currency),
        val = currency;
        if (valid) {                
            ctrl = val;
        } else {             
            ctrl.setAttribute('maxlength', '13');                
        }
    };   

现在，当第 14 位是小数（。）时，它可以正常工作，但请把任何整数放在第 14 位，看看有什么区别。

Answer 1

试试这个..

HTML

<input id="a" type="text" maxlength="15" />

JS

$('#a').keypress(function (event) {
      if ($('#a').val().length < 14) {
          if (event.keyCode != '110' && event.charCode != '46') {
              $('#a').attr('maxlength', '13');
          } else if (event.keyCode == '110' || event.charCode == '46') {
              $('#a').attr('maxlength', '16');
          } 
      }
});

Answer 2

你为什么不直接把数字转换成字符串，检查一个句点的长度和最后一个子字符串，并相应地调整最大长度

function checkCurrency(ctrl) {
    var x = ctrl.value.toString();
    var size = x.length;
    if (x.substring(size-1) == "." && size >= 14) {
        ctrl.maxlength = 16;
    } else {
        ctrl.maxlength = 13;
    }
}

Answer 3

你可以这样做

HTML

<input type="text" id="inp">

JQuery

    $('input').attr('maxLength','13').keyup(

     function (){
     if(this.value.contains('.'))
         $(this).attr('maxLength','16');
    else
        $(this).attr('maxLength','13');
    });

不要忘记添加 JQuery 引用。

编辑： 代码已编辑，因为您不希望文本闪烁。

Answer 4

我的 2 美分

HTML

<input type="text" maxlength="13"/>

JS

$('input').keydown(function (event) {
    $(this).data('previous', $(this).val());
    if ((event.keyCode == 110) || (event.keyCode == 190)) {
        $(this).attr('maxlength', 16);
    }
});
$('input').keyup(function (event) {
    if ( ! /^\d{0,13}(\.\d{0,2})?$/.test($(this).val())) {
        $(this).val($(this).data('previous'));
    }
});

JSFiddle

Answer 5

我从不认为字符串比较比正则表达式测试更好（当它是一个数字问题时（绝对是当它是一个小数问题时））。 我对用户输入的问题相当有经验，所以我总是更喜欢使用正则表达式来完成这种输入行为，因为它的性能总是更快、更可靠、更易于维护。

我做了一个“输入备份”行为以始终支持最后一次有效插入。因此，根据您的确切需要，这是一个完整的示例（我保留了您的正则表达式）：fiddle

jQuery 代码

var varRegex = /^\d{0,13}(\.\d{0,2})?$/;
var varLastValidValue = "";

$(function ()
{
    $('#SpecialInput').keyup(function ()
    {
        if (!varRegex.test($(this).val()))
            $(this).val(varLastValidValue);

        else
            varLastValidValue = $(this).val();
    });
});

与其他答案不同，我的优势是只强制使用 2 个十进制数字（任何地方）。在服务器端，我认为这是必不可少的（而且我相信这就是您对输入进行限制的原因。您正在反映来自数据库的存储数据的格式，对吧！？）。

重要的是，此代码仅适用于（原样）1 个输入。对于同一页面中的多个输入，一种简单的方法是使用元素属性或类似的东西来存储“LastValidValue”。

（我知道最完美的是监听'onkeydown'事件，并阻止用户输入。但它会使用更高级的代码，我想让它变得简单）

希望我能帮上忙！

Answer 6

试试这个：

HTML 代码：

<input type="text" maxlength="13" />

还有 jQuery：

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>

<script>
$("input").keypress(function(e)
{
    string = $('input').val();
    length = string.length;
    if (length == 13){
        if (e.which == 46){
            $("input").attr('maxlength', 16);
        }
    }
});
</script>