Для начала заготовить обработчики событий и функцию установки обработчиков.
Ни какая кросс-браузерность никогда не планировалась. Работает в моём браузере (chrome) и ладно.
// Устанавливает обработчики, если они ещё не установлены
// Может кому-то это будет лишним, но мне надо именно так
function fixedInputInit(input) {
var eventsArray = ['keydown', 'paste', 'cut', 'input'];
var events = $._data(input[0], 'events' );
if (events) {
for (var i = 0; i < eventsArray.length; i++) {
var eventHandlers = events[eventsArray[i]];
if (eventHandlers) {
for (var j = 0; j < eventHandlers.length; j++) {
if (eventHandlers[j] === fixedInputEventListener) return;
}
}
}
}
input.on('keydown paste cut input', null, fixedInputEventListener);
}
// Обработчик-диспетчер перенаправляет каждый тип в свой обработчик
// На фига он нужен? Чтобы иметь дело с одним обработчиком, а не тремя
function fixedInputEventListener(event) {
if (event.type === 'paste') return fixedInputPasteHandler(event);
if (event.type === 'cut') return fixedInputCutHandler(event);
if (event.type === 'keydown') return fixedInputKeydownHandler(event);
if (event.type === 'input') return fixedInputInputHandler(event);
}
// Против новомодных крестиков
function fixedInputInputHandler(event) {
var target = event.target;
var fixedLength = parseInt(target.dataset.fixedLength, 10);
if (target.value === '') target.value = target.defaultValue.substr(0, fixedLength);
}
// Это чтобы не пастили в фиксированную часть
function fixedInputPasteHandler(event) {
var target = event.target;
var fixedLength = parseInt(target.dataset.fixedLength, 10);
if (target.selectionStart < fixedLength && target.selectionEnd > -1) event.preventDefault();
}
// А это чтобы не вырезали из фиксированной части
function fixedInputCutHandler(event) {
var target = event.target;
var fixedLength = parseInt(target.dataset.fixedLength, 10);
if (target.selectionStart < fixedLength && target.selectionEnd > -1) event.preventDefault();
}
// Ну и чтобы не печатали в фиксированной части
function fixedInputKeydownHandler(event) {
var keyCodes = [9, 35, 36, 37, 39]; // tab, home, end, left arrow, right arrow
var keyCode = event.keyCode;
if (keyCodes.indexOf(keyCode) !== -1) return;
var target = event.target;
var fixedLength = parseInt(target.dataset.fixedLength, 10);
if (target.selectionStart < fixedLength && target.selectionEnd > -1) event.preventDefault();
if (keyCode === 8 && target.selectionStart === fixedLength && target.selectionEnd === fixedLength) event.preventDefault();
}
// Активируется так:
$('input').each(function() { fixedInputInit($(this)); });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input data-fixed-length="12" value="www.site.ru/foo" />
Как видно на элементе input
должен быть атрибут data-fixed-length="Сколько_вам_надо"
:
<input ... data-fixed-length="12" ... />
Активируется так:
$('input').each(function() { fixedInputInit($(this)); });
Преимущества:
Блокировка прямо на вводе, поэтому нет нужны исправлять строку после каждого нажатия каждой кнопки. Всё сразу вводится правильно, либо отклоняется без лишних телодвижений.
Элемент GUI input является одним целым. При прокрутке (когда текст длинный) фиксированная часть тоже прокручивается (уходит за границу поля), а не закрывает собой "невидимый" участок поля ввода.