Поскольку вы также отметили это как вопрос jQuery, вот простое (ну, довольно простое) решение jQuery:
$('#text_statute_section').on('keypress', function(event) {
if(null !== String.fromCharCode(event.which).match(/[a-z]/g)) {
event.preventDefault();
$(this).val($(this).val() + String.fromCharCode(event.which).toUpperCase());
}
});
Использование нажатия клавиши предотвращает эффект "отскока", который имеет нажатие клавиши (нажатие клавиши также имеет место, но не событие, которое здесь не различает непосредственно верхний и нижний регистр - проверка клавиши Shift является грязной из-за блокировки прописных букв). Кроме того, это работает с вводимым символом, преобразует его в верхний регистр, а затем добавляет его к существующему значению, а не сначала добавляет, а затем преобразует все это в верхний регистр, как это делают большинство других решений, которые я видел. Наконец, он фактически преобразует символ, а не применяет к нему стиль форматирования, как это делает CSS. Все это дает лучший контроль, особенно в ситуациях, когда некоторые символы необходимо вводить в верхнем регистре, а некоторые нет, например, в серийных номерах и т. П.
РЕДАКТИРОВАТЬ: (четыре года спустя)!
Я никогда не был доволен тем, как jQuery / javascript обрабатывает изменение ключей в верхний регистр, когда они вводятся. Я рассмотрел все предложения в этом посте, и ни одно из них (меньше всего моих) не работает безупречно , Это раздражает меня, так как в старые времена VB6 было просто изменить символ KeyAscii, который был передан событию KeyPress. Во всяком случае, совершенно случайно, я нашел своего рода «черное искусство» решение, которое работает безупречно, насколько я его тестировал. Это означает, что он работает в Chrome, он правильно обрабатывает любую позицию курсора на тексте, он (с некоторой работой) не меняет поведение фокуса браузера и надежно переключается на верхний регистр без какого-либо резкого показа строчной буквы в первую очередь. В то время как решение CSS также делает все это, как уже отмечали другие, у него есть недостаток, заключающийся в необходимости программно принудительно переводить нижележащие символы в нижний регистр, когда вам нужна фактическая строка для работы, что может быть хлопотным для отслеживания и, следовательно, не масштабируется хорошо. Итак, я подумал, что мог бы написать это на тот случай, если кто-то посчитает это полезным.
Это решение зависит от небольшого количества Джоша Буша (180 строк кода, для тех, кто беспокоится о раздувании зависимостей). Маскированный входной плагин от digitalbush , который отлично работает и делает то, что он делает очень хорошо. Если вы измените event.which на другое значение, а затем вызовете метод mask() (сначала укажите обработчик нажатия клавиш, а затем вторую маску в своем коде), изменение сохранится.
Вот немного кода:
$.mask.definitions['b'] = '[A-Z, ]';
$('#txtMyInput').on('keypress', function(e) {
e.which = String.fromCharCode(e.which).toUpperCase().charCodeAt(0);
})
.mask('b?bbbbbbbbbbbbbbbbbbb', { placeholder: '' })
Маска изначально не поддерживает очень много типов масок: это литералы, буквенные, числовые и буквенно-цифровые. Если вы хотите пунктуации или что-то еще, вы должны бросить свои собственные с помощью регулярных выражений. (Если вы сделаете это, вам нужно помнить, что одно и то же совпадение с регулярным выражением применяется к каждому персонажу по одному, без учета других символов, поэтому вы не сможете сделать что-нибудь необычное). В моем конкретном случае мне нужны были все заглавные буквы, а также пробелы и запятые. ? в строке маски означает, что следующие символы являются необязательными, поэтому этот дает мне до 20 символов. Поскольку мне не нужно было показывать маску, я использовал пустую строку для заполнителя.
Это все работает отлично, за исключением одной маленькой проблемы: если вы хотите сохранить способ, которым браузер выделяет текст при вставке в поле, вам нужно проделать дополнительную работу. Мне пришлось взломать код маски, чтобы получить то, что я хотел.
Сначала я попытался просто выбрать текст в обработчике событий фокуса, который обычно работает, когда я вызываю focus() из обработчика нажатия клавиш. Это не сработало здесь; курсор только что был установлен в конец текста, как при щелчке мышью там. Я попытался изменить заполнитель на пробел. Это привело к заполнению текста достаточным количеством пробелов, чтобы заполнить указанный предел, и выбору всего этого.
Я попробовал некоторые из методов здесь , но лучший из них (то есть тот, который действительно работал в этом случае) все еще не применяет подсветку до нажатия клавиши вверх, что означает, что в когда это происходит, и не происходит вообще, если вы удерживаете клавишу, пока она не повторится и не отпустит, когда фокус находится в рамке.
Итак, я копался в коде маски. Как оказалось, плагин также имеет обработчик событий фокуса, который он использует для установки индикатора маски (скажем, (___) ___-___-____ для телефона) в поле, когда вы фокусируете его. Это поведение, которое вы хотите большую часть времени, но не здесь, потому что оно заменяет выделенный текст выделенным текстом, соединенным с той частью индикатора маски, которая еще не была заполнена. Если у вас нет индикатора маски, это приводит к отмене выбора текста в блоке, как если бы вы программно присвоили текстовое значение блока.
Я решил немного взломать код маски. Сначала я попытался закомментировать весь обработчик события фокуса, что привело к тому, что маска ввода не отображалась в других полях, где я этого хотел. Итак, я нашел менее агрессивную альтернативу. Я изменил это (в настоящее время jquery.maskedinput.js, строка 164):
}).on("focus.mask", function() {
if (!input.prop("readonly") {
// etc.
на это:
}).on("focus.mask", function() {
if (!input.prop("readonly") && settings.placeholder.length > 0) {
Это позволяет обойти настройку индикатора маски, если вы установили в качестве заполнителя пустую строку, что позволяет браузеру вести себя как фокус.
Еще одна вещь: если вы используете метод focus(), чтобы сосредоточиться на текстовом поле (например, чтобы спасти пользователя ввода данных от тенденции браузера переходить к частям, неизвестным при использовании клавиши табуляции), вы Придется вызвать метод select() в обработчике события фокуса, чтобы правильно выделить текст (keybdFocus - это флаг, который я устанавливаю при вызове события focus() из обработчика keydown, чтобы отличить его от сгенерированный мышью фокус):
$('#txtMyInput').on('keypress', function(e) {
e.which = String.fromCharCode(e.which).toUpperCase().charCodeAt(0);
})
.mask('b?bbbbbbbbbbbbbbbbbbb', { placeholder: '' })
.focus(function() {
if (kybdFocus) {
kybdFocus = false;
$(this).select();
}
});
Суммируя шаги:
- Загрузите плагин Josh Bush's Masked Edit.
- Изменить строку кода в обработчике фокуса плагина.
- Установите определение маски (если необходимо) для обработки нужных символов.
- В обработчике событий нажатия клавиш используйте вашу любимую технику, чтобы изменить e.which на его эквивалент в верхнем регистре. (Важно: вызов обработчику должен предшествовать вызову метода
mask() в вашем коде. Маска вычисляет, например, чтобы определить, соответствует ли символ-кандидат маске, и, очевидно, обработчику и Код маски запускается в том порядке, в котором они указаны.)
- Установите значение заполнителя на
'' при вызове метода mask().
- Если вы попали в поле ввода с фокусом, вызовите метод
select() в обработчике события фокуса.
Конечно, если вы просто хотите, чтобы символы вводились в верхнем регистре в контексте типичного поля ввода в маске, вы можете пропустить шаги 2 и 4. Вот как я попал в это в первую очередь.