卡號正則表達式和插入/光標位置（javascript）

Question

我有一個正則表達式可以將信用卡號分成4組4位數字。

正則表達式的作品，但如果我想回到字符串並編輯它，光標跳轉到選擇的結尾。

<input id= "cardNumber" maxlength="19" type="tel"/> 

JS如下：

document.getElementById('cardNumber').addEventListener('input', function (e) { 

var field = e.target; 

field.value = field.value.replace(/[^\dA-Z]/g, '').replace(/(.{4})/g, '$1 ').trim(); 

}); 

很顯然，我不希望光標跳到項的末尾。我一直在玩caret的位置，selectionStart和End，但到目前爲止沒有運氣。

任何指針非常讚賞。

在這裏看到的jsfiddle：https://jsfiddle.net/oo7Ljm4j/1/

Answer 1

好吧，經過一番挖掘，我找到了答案！

通過使用field.selectionEnd並在每個（on）輸入上重置它，它將光標保持在希望進行編輯的位置。

這個問題源於這樣一個事實：當你對正則表達式進行更改時，它會重新呈現並更新整個字段（所以，顯然，當正則表達式觸發時，光標默認爲值的末尾瀏覽器認爲你完成每一次。）

document.getElementById('cardNumber').addEventListener('input', function (e) { 

    var field = e.target, position = field.selectionEnd, length = field.value.length; 


    field.value = field.value.replace(/[^\dA-Z]/g, '').replace(/(.{4})/g, '$1 ').trim(); 


    field.selectionEnd = position += ((field.value.charAt(position - 1) === ' ' && field.value.charAt(length - 1) === ' ') ? 1 : 0);  
}); 

這樣我們告訴光標重新計算它的選定結束在每個輸入位置。

檢查工作JSFiddle aqui：https://jsfiddle.net/oo7Ljm4j/6/

Answer 2

可以使用KEYUP只是檢查，如果關鍵背面是一個按什麼也不做

document.getElementById('cardNumber').addEventListener('keyup', function (e) { 
    var key = event.which || event.keyCode || event.charCode; 
    var field = e.target; 
    if (key !== 8) { 
    field.value = field.value.replace(/[^\dA-Z]/g, '').replace(/(.{4})/g, '$1 ').trim(); 
    } 
}); 

DEMO

OR

可使用create一個函數在你的文本輸入的每個關鍵事件中都使用它來完全禁用非整數字符和字母事件粘貼非整數字符

document.getElementById('cardNumber').addEventListener('keyup', format); 
document.getElementById('cardNumber').addEventListener('keydown', format); 
document.getElementById('cardNumber').addEventListener('copy', format);  
document.getElementById('cardNumber').addEventListener('keypress', format); 

function format(e) { 
    var key = event.which || event.keyCode || event.charCode; 
    var field = e.target; 
    if (key !== 8) { 
     field.value = field.value.replace(/[^\dA-Z]/g, '').replace(/(.{4})/g, '$1 ').trim(); 
    } 
} 

DEMO

，你也可以接受箭頭，如果這情況下，添加此條件

(key < 37 || key > 39) 

使你的病情會是這樣

if (key !== 8 && (key < 37 || key > 39)) { 
    field.value = field.value.replace(/[^\dA-Z]/g, '').replace(/(.{4})/g, '$1 ').trim(); 
} 

DEMO