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

Я хочу преобразовать строчные символы в верхний регистр, как типы пользователей с помощью javascript. Любые предложения приветствуются.

я попробовал следующее:

$("#textbox").live('keypress', function (e) {
    if (e.which >= 97 && e.which <= 122) {
        var newKey = e.which - 32;
        // I have tried setting those
        e.keyCode = newKey;
        e.charCode = newKey;
    }
});
36
javascript jquery keycode uppercase

12 ответов

$("#textbox").bind('keyup', function (e) {
    if (e.which >= 97 && e.which <= 122) {
        var newKey = e.which - 32;
        // I have tried setting those
        e.keyCode = newKey;
        e.charCode = newKey;
    }

    $("#textbox").val(($("#textbox").val()).toUpperCase());
});
24
css

#textbox{text-transform:uppercase}
54

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

input#textbox {
    text-transform: uppercase;
}

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

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

Привет этот код отлично работает на входе и textarea без задержки или изменения капитализации

$("#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;
            });

mix from https://stackoverflow.com/a/7944108/1272540 и https://stackoverflow.com/a/13155583/1272540

jsFiddle

5

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

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

для информации, что вы видите, может быть, верхний регистр, но на самом деле это все еще то, что вы печатаете, если вы вводите "тест", он показан как "тест", но когда ваш get By val() он показан как "тест".

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

$(этот).функция val($(это).вал.)(toUpperCase ());

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

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

input[attr='value']{
text-transform:uppercase;
}
3
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)" />

Edit:

самый самый простой способ С помощью css:

#txtId {text-transform:uppercase}
1
$(document).ready(function () {
        $("#textbox").keyup( function (e) {
            var str = $(this).val();
            $("#textbox").val(str.toUpperCase());
});
});
1

поскольку вы также отметили это как вопрос 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 также делает, но событие.который не различает непосредственно между верхним и нижним регистром здесь-shift key check грязный из-за caps lock). Кроме того, это работает с входным символом, преобразует его в верхний регистр, а затем добавляет его к существующему значению, а не сначала добавляет и затем преобразование всего этого в верхний регистр, как и большинство других решений,которые я видел. Наконец, он фактически преобразует символ, а не применяет к нему стиль форматирования, как это делает CSS. Все это дает лучший контроль, особенно в ситуациях, когда некоторые символы должны быть вынуждены прописными буквами, а некоторые нет, например, в серийных номерах или тому подобное.

EDIT: (четыре года спустя)!

Я никогда не был доволен тем, как jQuery / javascript обрабатывает изменение ключей на прописные буквы по мере их ввода. Я просмотрел все предложения в этом посте, и ни один из них (меньше всего мой) не работает безупречно. Это раздражает меня, так как в старые дни VB6 было просто изменить символ KeyAscii, который был передан событию нажатия клавиши. Во всяком случае, совершенно случайно я нашел своего рода решение "черного искусства", которое работает безупречно, насколько я его протестировал. Это означает, что он работает в 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: '' })

Маска не поддерживает очень много типов масок изначально: литералы, Альфа, числовые и буквенно-цифровые. Если вы хотите пунктуацию или что-то еще, вы должны свернуть свой собственный, используя regex. (Если вы это сделаете, вам нужно будет иметь в виду, что одно и то же регулярное выражение применяется к каждому символу по одному, без учета других символов, поэтому вы не можете делать ничего необычного). В моем конкретном случае мне нужны были все заглавные буквы, плюс пробелы и запятые. The ? в строка маски означает, что следующие символы являются необязательными, поэтому этот дает мне до 20 символов. Поскольку мне не нужна была маска для показа, я использовал пустую строку для заполнителя.

все работает отлично, за исключением одной небольшой проблемы: если вы хотите сохранить способ, которым браузер выбирает текст при закладке в поле, вам нужно выполнить дополнительную работу. Мне пришлось взломать код маски, чтобы получить то, что я хотел.

Я сначала попытался просто выбрать текст в обработчик событий focus, который обычно работает, когда я вызываю focus() от обработчика keydown. Здесь это не сработало; курсор просто был установлен в конец текста, как и при щелчке мыши. Я попытался заменить заполнитель пробелом. Это привело к заполнению текста достаточным количеством пробелов для заполнения указанного предела и выбора всего.

я попробовал некоторые техники здесь, но лучший из них (т. е. тот, который действительно работал в этом case) по-прежнему не применяет подсветку до нажатия клавиши вверх, что означает, что есть отставание, когда это происходит, и это не происходит вообще, если вы держите ключ вниз, пока он не повторится и не отпустите, когда фокус находится в поле.

поэтому я покопался в коде маски. Как оказалось, плагин также имеет обработчик событий фокуса, который он использует для настройки индикатора маски (скажем,(___) ___-___-____ для телефона) в поле, когда вы фокусируетесь на нем. Это поведение вы хотите большую часть времени, но не здесь, поскольку он заменяет выделенный текст выделенным текстом, объединенным с частью индикатора маски, которая еще не заполнена. Когда у вас нет индикатора маски, это приводит к отмене выбора текста в поле, как это произошло бы, если бы вы программно назначили текстовое значение поля.

Я решил немного взломать код маски. Сначала я попытался комментировать весь обработчик событий фокуса, который не показывал маску ввода на других поля, где я хотел. Итак, я нашел менее агрессивную альтернативу. Я изменил это (в настоящее время 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() метод для фокусировки на текстовом поле (например, для спасения пользователя ввода данных из тенденции браузера блуждать по неизвестным частям при использовании клавиши tab), вам придется вызвать 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. скачать плагин редактирования Джоша Буша в маске.
  2. измените строку кода в плагине обработчик фокуса.
  3. настройки определения маски (при необходимости) для обработки символов.
  4. в обработчике событий нажатия клавиш используйте свою любимую технику для изменения e.что в его верхнем регистре эквивалентно. (Важно: вызов обработчика должны предшествовать вызов mask() метод в коде. Маска оценивает e.что определить, соответствует ли символ-кандидат маске, и, по-видимому, обработчик и код маски запускаются в порядке в которой они указаны.)
  5. установите значение заполнителя в '' когда вы называете mask() метод.
  6. если вы нажмете поле ввода с фокусом, вызовите select() метод в обработчике события фокуса.

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

1

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

Внимание: не изменяет "значение" поля, только дисплей. Для этого смотрите здесь: обновление значения входного сигнала без потери позиции курсора

$(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/

0

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

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

Он имеет следующие преимущества:

  • сохраняет капитализацию заполнителя нетронутой
  • капитализирует ввод немедленно (на keydown)
  • не двигает курсор
  • капитализирует значение ввода, если оно предварительно заполнено

JS Fiddle здесь

0

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

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

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

-1