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

【问题标题】：Best way to adjust letter spacing every 3 chars in Ionic/Angular input box在 Ionic/Angular 输入框中每 3 个字符调整字母间距的最佳方法
【发布时间】：2018-03-17 18:16:12
【问题描述】：

我希望用户输入代码并帮助他们转录代码，我希望增加他们键入的每个第三个字符之间的间距。我已经看到这对于具有 4 个字符间距的信用卡做得很好。这将用于 Ionic 应用程序，因此可以将简单的输入框替换为自定义的 Ionic 控件。

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

【问题讨论】：

代码是字母数字输入吗？
我可以将它用于数字或非数字输入

标签： html css angular ionic-framework

【解决方案1】：

这是另一个版本，没有 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

【讨论】：

感谢演示。当前代码有一个错误，当您输入 3n + 1 个字符时，它会在第二个字符后放置一个空格。 - 示例：“abcd”=>“a bcd”
本来是这样的，但现在，我想你会更喜欢“abc d”？
这个应该就是你的意思：stackblitz.com/edit/angular-kp2j5v?file=app/app.component.ts
或者直接使用format(val) { return val.replace(/([^ ][^ ][^ ]) */g, "\$1 ").trim(); }
我已经测试过了，但是当你编辑输入时它会中断:(

【解决方案2】：

您可以在 keyup 事件上添加空格。

Example

$('#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);
})

【讨论】：

【解决方案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);
})

【讨论】：