Номер карты Regex и позиция курсора/курсора (javascript)

Question

У меня есть регулярное выражение, чтобы разделить номер кредитной карты на 4 группы по 4 цифры.

Regex работает, но если я хочу вернуться к строке и отредактировать ее, курсор переместится в конец выделения.

<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(); 

}); 

Очевидно, что я не хочу, чтобы курсор, чтобы перейти к концу записи. Я играл с каретными позициями, selectStart и End, но пока не повезло.

Любые указания очень ценятся.

см jsfiddle здесь: https://jsfiddle.net/oo7Ljm4j/1/

Answer 1

ОК, так что после некоторого рытья я нашел ответ!

Используя поле field.selectionEnd и перезагружая это на каждом входе, он держит курсор там, где вы хотите его редактировать.

Проблема возникает из-за того, что регулярное выражение будет повторно отображать и обновлять поле ENTIRE, когда вы вносите в него изменения (так что, очевидно, курсор по умолчанию совпадает с концом значения, когда регулярное выражение запускается как браузер думает, что вы закончили каждый раз.)

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);  
}); 

Таким образом, мы говорим курсор пересчитывать это selectionEnd положение на каждом входе.

Заканчивать рабочего 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

ИЛИ

вы можете использовать создать функция a использует это в каждом ключевом событии в вашем текстовом вводе для полностью отключенного не целого char и pr событие наклеивать не целый голец

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