最佳方式/角输入框

我想用户输入的代码，并帮助他们抄写它我会希望增加他们键入每3个字符之间的间距。我已经看到这个很好地完成了4个字符间距的信用卡。这将是一个离子应用程序，所以简单的输入框可以用一个定制的离子控制器代替。最佳方式/角输入框

你用什么方法，这和什么效果最好？打开Angular/Ionic代码示例或相关的网站教程。纯粹的CSS会很好。

2017-10-06 Tony O' Hagan

代码是字母数字输入吗？ – Vega

我可能将其用于任一数字或非数字输入 –

这里是一个其他版本，不带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

来源

2017-10-08 18:46:30 Vega

感谢您的演示。当前代码有一个错误，当您输入3n + 1个字符时，会在第二个字符后面留出空格。 - 例如：“abcd”=>“a bcd” –

它意思就是这样，但现在，我认为你更喜欢“abc d”？ – Vega

这一应该是你的意思：https://stackblitz.com/edit/angular-kp2j5v?file=app/app.component.ts – Vega

您可以在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);

}）

来源

2017-10-06 02:19:33

感谢。这看起来是一个好的解决方案。 –

我发现基于维娅的方法更简单的方法......我们基本上匹配了3个非空格字符，我们移除先前添加的空间字符。这是需要允许用户更新或删除文本框中的任何字符。

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

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

来源

2017-10-08 11:18:31

最佳方式/角输入框

回答

相关问题