6

我有一个限制为 16 个数字的输入框。我想为美学做的是每 4 个数字放置一个间隙。

例如。当一个人进入

1234567891234567

它应该看起来像这样

1234 5678 9123 4567

这怎么可能在 JQuery 中的 Key Up 上实现？

4

7 回答 7

4

这是另一个解决方案：

$(function() {

    $('#my-input')
    .blur(function() {
        var value = $(this).val();
        value = value.match(/.{1,4}/g).join(" ");
        $(this).val(value);
    })
    .focus(function() {
        var value = $(this).val();
        value = value.replace(/\s/g, '');
        $(this).val(value);
    });

});

你可以看看那个工作的jsFiddle。

我添加了一个focus事件以使其更加用户友好。总结一下：

  • 关于模糊（即离开输入时）：每 4 个字符拆分一次；
  • on focus（即在编辑输入时）：删除先前添加的空格。
于 2012-06-12T15:51:42.753 回答
3

您可以使用模数函数：

$("input").keyup(function(){
        var $this = $(this);
        if ((($this.val().length+1) % 5)==0){
            $this.val($this.val() + " ");
        }
    });

-- 看演示 --

然而它有点错误，但对你来说可能是一个很好的起点。

正如其他用户所提到的，这对可用性不利，最好使用 4 个文本框（如果长度始终为 16）并使用如下内容：

$("input").keyup(function(){
        var $this = $(this);
        if ($this.val().length>=4){
         $this.next().focus();   
        }
    });

-- 看演示 --

同样，可能有点错误，我只是指出不同的方法。

于 2012-06-12T15:46:53.803 回答
1

如果您考虑将其放在多个文本框中，请尝试以下解决方案。

$(function() {
    var charLimit = 4;
    $(".inputs").keydown(function(e) {

        var keys = [8, 9, /*16, 17, 18,*/ 19, 20, 27, 33, 34, 35, 36, 37, 38, 39, 40, 45, 46, 144, 145];

        if (e.which == 8 && this.value.length == 0) {
            $(this).prev('.inputs').focus();
        } else if ($.inArray(e.which, keys) >= 0) {
            return true;
        } else if (this.value.length >= charLimit) {
            $(this).next('.inputs').focus();
            return false;
        } else if (e.shiftKey || e.which <= 48 || e.which >= 58) {
            return false;
        }
    }).keyup (function () {
        if (this.value.length >= charLimit) {
            $(this).next('.inputs').focus();
            return false;
        }
    });
});

它具有以下特点，

  1. 下一个输入的自动选项卡
  2. 只有数字
  3. charLimit - 设置为不同的长度

演示：http: //jsfiddle.net/skram/qygB2/20/

于 2012-06-12T15:58:57.647 回答
1

我会在这里使用keypress处理程序：

$("#someinput").on('keypress',function(){
  var currval = this.value.replace(/\s+/g,'');
  return (this.value += currval.length && currval.length%4 < 1 ? ' ' : '', true);
});
于 2013-08-08T09:28:51.733 回答
0

像这样的东西

$('input').keyup(function(){
    var val = $(this).val();
    if(val.length >= 4){
        $(this).next().focus();
    }
});

编辑：嗯，你的例子不如上面这个，所以我添加了这个。

于 2012-06-12T15:47:16.000 回答
0

用keyup完成

$('#textbox').on('keyup', function(e) {
    var val = this.value;
    if (e.which != 8 && e.which != 46) {  // handle delete and backspace
        if (val.replace(/\s/g, '').length % 4 == 0) {
            $(this).val(val + ' ');
        }
    } else {
        $(this).val(val);        
    }
})

演示

于 2012-06-12T15:52:27.433 回答
0

这是您可能要考虑的另一种解决方案

OnBlur = function()
{
    var value = $('#txtName').val().replace(/\s/g, "");
    var numberOfSpaces = Math.ceil(value.length / 4)-1;
    while(numberOfSpaces >0)
    {
        value = value.substr(0,numberOfSpaces*4) + ' ' + value.substr(numberOfSpaces*4);
        numberOfSpaces--;
    }
}
于 2012-06-12T16:01:21.687 回答