Преобразование в верхний регистр для пользовательских типов с помощью javascript

Это может быть хорошим решением. Просто установите это в своем CSS:

input#textbox {
    text-transform: uppercase;
}

Если вы отправляете данные в скрипт на стороне сервера (скажем, php), вы всегда можете сделать что-то вроде этого:

$upper_data = strtoupper($_POST['textbox']);

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

$("#input").on('input', function(evt) {
              var input = $(this);
              var start = input[0].selectionStart;
              $(this).val(function (_, val) {
                return val.toUpperCase();
              });
              input[0].selectionStart = input[0].selectionEnd = start;
            });

смесь из https://stackoverflow.com/a/7944108/1272540 и https://stackoverflow.com/a/13155583/1272540

jsFiddle

попробуйте этот скрипт css, он работает для меня.

<style>    
input{text-transform:uppercase};
</style>    

для информации, то, что вы видите, может быть в верхнем регистре, но на самом деле это все равно то, что вы набираете, если вы набираете «Test», это отображается как «TEST», но когда вы получаете с помощью val (), оно отображается как «Test».

если вы хотите, чтобы это было в верхнем регистре, добавьте ниже сценарий для события, такого как размытие объекта или элемента, по мере необходимости.

$ (это) .val ($ (это) .val (). toUpperCase ());

И если вы хотите использовать для определенного объекта, добавьте дополнительный скрипт, например тот, который я использовал сейчас

input[attr]{
text-transform:uppercase;
}

input[attr='value']{
text-transform:uppercase;
}

function changeToUpperCase(event,obj) {
    charValue = (document.all) ? event.keyCode : event.which;
    if (charValue!="8" && charValue!="0" && charValue != "27"){
        obj.value += String.fromCharCode(charValue).toUpperCase();
        return false;
    }else{
        return true;
    }
}

<input id="txtId" type="text" onkeypress="return changeToUpperCase(event,this)" />

Изменить:

Самый самый простой способ - использовать css:

#txtId {text-transform:uppercase}

Поскольку вы также отметили это как вопрос 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());
    }
});

Использование нажатия клавиш предотвращает эффект «дребезга», который имеет keyup (keydown также имеет, но event. который здесь не делает различий между верхним и нижним регистром - проверка клавиши Shift беспорядочная из-за блокировки заглавных букв). Кроме того, это работает с входным символом, преобразует его в верхний регистр, а затем добавляет его к существующему значению, а не сначала добавляет, а затем преобразует все это в верхний регистр, как это делают большинство других решений, которые я видел. Наконец, он фактически преобразует символ, а не применяет к нему стиль форматирования, как это делает CSS. Все это дает лучший контроль, особенно в ситуациях, когда некоторые символы необходимо вводить в верхний регистр, а некоторые нет, например, в серийных номерах и т.п.

РЕДАКТИРОВАТЬ: (четыре года спустя)!

Я никогда не был доволен тем, как jQuery / javascript обрабатывает замену клавиш на верхний регистр по мере их ввода. Я изучил все предложения в этом посте, и ни одно из них (в первую очередь мое) не работает безупречно. Это меня раздражает, так как в старые времена VB6 было несложно изменить символ KeyAscii, который передавался событию KeyPress. Во всяком случае, совершенно случайно я нашел своего рода решение «черного искусства», которое работает безупречно, насколько я его тестировал. Это означает, что он работает в Chrome, он правильно обрабатывает любую позицию курсора в тексте, он (с некоторой работой) не меняет поведение фокуса браузера и надежно изменяется на верхний регистр без какого-либо дрожащего отображения сначала нижнего регистра. Хотя решение CSS также делает все это, как отмечали другие, у него есть недостаток, заключающийся в необходимости программно переводить базовые символы в верхний регистр, когда вам нужна фактическая строка для работы, что может быть проблемой для отслеживания и, следовательно, не Не масштабируется. Итак, я подумал, что могу написать об этом, если кто-то сочтет это полезным.

Это решение действительно зависит от небольшого (180 строк кода, для тех, кто беспокоится о раздувании зависимостей) Джоша Буша Masked Плагин ввода от 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();
    }
});

Обобщая шаги:

1. Загрузите плагин Masked Edit Джоша Буша.
2. Измените строку кода в обработчике фокуса плагина.
3. Настройте определение маски (при необходимости) для обработки нужных символов.
4. В обработчике событий нажатия клавиш используйте свой любимый прием, чтобы изменить e.which на его эквивалент в верхнем регистре. (Важно: вызов обработчика должен предшествовать вызову метода mask() в вашем коде. Маска оценивает e.which, чтобы определить, подходит ли символ-кандидат маске, и, очевидно, обработчик и маска code запускаются в том порядке, в котором они указаны.)
5. Установите значение заполнителя на '' при вызове метода mask().
6. Если вы попали в поле ввода с фокусом, вызовите метод select() в обработчике событий фокуса.

Конечно, если вы просто хотите принудительно переводить символы в верхний регистр в контексте типичного окна редактирования с маской, вы можете пропустить шаги 2 и 4. Вот как я впервые попал в это.

Я знаю, что довольно опаздываю на вечеринку, но хочу предложить следующее:

(function ( $ ) {

  var displayUppercase = function ($element) {
    if ($element.val()) {
      $element.css('text-transform', 'uppercase');
    } else {
      $element.css('text-transform', 'none');
    }
  };

  $.fn.displayAsUppercase = function() {
    $(this).each(function() {
        var $element = $(this);
      displayUppercase($element);
      $element.on('input', function(){displayUppercase($element)});
    });
    return this;
    };

}( jQuery ));

У него есть следующие преимущества:

• Сохраняет заглавные буквы местозаполнителя нетронутыми
• Мгновенно вводит заглавные буквы (при нажатии клавиши)
• Не перемещает курсор
• Делает значение ввода заглавным, если оно задано заранее.

JS Fiddle здесь

Это решение, которое я придумал, которое также позволяет избежать проблем с заменой заполнителей на верхний регистр и не вмешиваться в положение курсора.

Внимание: не меняет «значение» поля, только отображение. Для этого см. Здесь: Обновление значения ввода без потери позиции курсора

$(function() {
    $("[data-uppercase='1']").on('keypress', function (e) {
        var $this = $(this);
        var placeholder = $this.attr('placeholder');
        if(placeholder && placeholder.length > 0) {
            this["_placeholder"] = placeholder;
            $this.attr('placeholder', '');
        }
        $this.css('text-transform', 'uppercase');
    }).on('keyup blur', function () {
        var $this = $(this);
        if ($this.val().length < 1) {
            $this.css("text-transform", "");
            $this.attr("placeholder", this["_placeholder"]);
            this["_placeholder"] = undefined;
        }
    });
});

Затем добавьте атрибут data-uppercase к элементу HTML:

<input type="text" data-uppercase="1" />

Работал в Chrome, Firefox и IE9 +.

Сценарий: https://jsfiddle.net/GarryPas/ptez7q0q/3/

Хотя подход CSS + Server Side UCase, вероятно, «лучший», вот решение jQuery на стороне клиента, которое я использую, когда возникает необходимость:

$("#id").keyup(function() {
    $(this).val($(this).val().replace(/([a-z])/,function(s){return s.toUpperCase()}));
});

Она некрасива, но со своей работой справится!

$("#id").keyup(function() {
    $(this).val($(this).val().replace(/([a-z])/,function(){
        return $("#id").toUpperCase();
    }));
});

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