Question

我希望用户输入代码并协助他们抄写代码我希望增加他们输入的每个第3个字符之间的间距。我已经看到这对于有4个字符间距的信用卡做得很好。这将是一个离子应用程序，所以简单的输入框可以用定制的离子控制替换。

您使用了哪些方法以及最有效的方法？打开Angular / Ionic代码示例或相关的网站教程。纯CSS会很好。

Answer 1

您可以在keyup事件中添加空间。

$('#input').on('keyup', function(e){
    var val = $(this).val();
    var newval = '';
    val = val.replace(/\s/g, '');
    for(var i=0; i < val.length; i++) {
        if(i%3 == 0 && i > 0) newval = newval.concat(' ');
        newval = newval.concat(val[i]);
    }
    $(this).val(newval);
})

Answer 2

这是另一个没有jquery的版本，可以使用字母数字并使用可配置的分隔符：

<强>打字稿：

GROUP_SEPARATOR=" ";
...... 
format(valString) {
    if (!valString) {
        return '';
    }
    let val = valString.toString();
    const parts = val.replace(/ /g, '');
    return parts.replace(/\B(?=(?:\w{3})+(?!\w))/g, this.GROUP_SEPARATOR) 
};

<强> HTML

<input [(ngModel)]="input"  
style="border:1px solid black" #myBudget="ngModel" (input)="input = format(input)">

DEMO

Answer 3

我找到了一个基于Vija方法的简单方法......基本上我们匹配3个非空间字符，我们删除任何以前添加的空格字符。这是允许用户更新或删除文本框中的任何字符所必需的。

最终解决方案可能还需要根据执行替换之前的位置调整position of the cursor。

$('#input').on('keyup', function(e){
  var val = $(this).val();
  var newval = val.replace(/([^ ][^ ][^ ]) */g, "\$1 ").trim();
  $(this).val(newval);
})

在Ionic / Angular输入框中每3个字符调整字母间距的最佳方法

3 个答案: