最佳方式/角輸入框

我想用戶輸入的代碼，並幫助他們抄寫它我會希望增加他們鍵入每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

最佳方式/角輸入框

回答

相關問題