Некорректно работает ввод номера карты с плагином маски ввода данных в input

#javascript #jquery

Не корректно работает ввод номера карты с плагином маски ввода данных в input. При
вводе номера карты числа заменяются...

Маска для поля ввода номера карты:

$("#cardNumber").mask("9999 9999 9999 9999?999");


Вроде бы ошибка в том, что плагин не учитывает длину, т.е. при достижении максимума
не блочит ввод, а продолжение ввода сдвигает предыдущее..

Как это можно исправить?

Полный код

P.S. в примере jsfiddle подключила плагины, но почему-то не срабатывают)

UPD ошибка в следующем. 

Введен номер карты, например такой 9000 6757 9090 9090900.
При попытке отредактировать эту часть номера 6757, например, заменить на число 8.

Если случайно нажму два раза число 8, то все число 6757, заменится на 8857. 

В итоге номер карты станет такой 9000 8857 9090 9090900.

UPD 1.1 обнаружила еще баги. поиск не дал результатов, либо не правильно ищу.


пропадает фокус у поля input с номером карты. из-за этого
приходится каждый раз менять раскладку с текстового ввода на
цифровой 
на Sony ZR, Android 5.1.1. при вводе номера карты цифры
переставляются местами


Можете хотя бы подсказать в каком направлении искать?
    

Ответы

Ответ 1

Чтобы плагин заработал на jsfiddle, нужно подключить его с другого адреса: http://cdn.rawgit.com/digitalBush/jquery.maskedinput/1.4.1/dist/jquery.maskedinput.min.js

Подробнее: https://stackoverflow.com/questions/17341122/link-and-execute-external-javascript-file-hosted-on-github

В примере описанной ошибки не заметил. Возможно, проблема в версии jQuery. Попробуйте
обновиться до 2.2.0

Ваш код работает, как ожидается:

$("#acctNumber").mask("999999");
$("#sumCheck").mask("99999");
$("#cardNumber").mask("9999 9999 9999 9999?999");
$("#cardCode").mask("999");


Ответ 2

Если Вам нужно ограничение последние цифры должны быть три или четыре, то код такой

$("#cardNumber").mask("9999 9999 9999 999?9");