Как изменить строчные буквы в верхнем регистре с помощью события "keyup"?

Моя цель - использовать событие jQuery .keyup() для преобразования введенных строчных символов в верхний регистр.

Как я могу это достичь?

Ответ 1

Plain ol 'javascript:

var input = document.getElementById('inputID');

input.onkeyup = function(){
    this.value = this.value.toUpperCase();
}

Javascript с jQuery:

$('#inputID').keyup(function(){
    this.value = this.value.toUpperCase();
});

Ответ 2

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

Вместо этого вы можете использовать следующий стиль CSS для поля ввода:

text-transform: uppercase;

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

Просто обойти это, однако, принудительно введите val().toUpperCase(); то у вас есть лучшее из обоих миров.

Ответ 3

$(document).ready(function()
{
    $('#yourtext').keyup(function()
    {
        $(this).val($(this).val().toUpperCase());
    });
});

<textarea id="yourtext" rows="5" cols="20"></textarea>

Ответ 4

Скажем, ваш html-код:

<input type="text" id="txtMyText" />

то jquery должен быть:

$('#txtMyText').keyup(function() {
  this.value = this.value.toUpperCase();
});

Ответ 5

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

Моя проблема с другими ответами заключается в том, что применение text-transform: uppercase css также заглавило бы текст заполнителя, который нам не нужен.

Чтобы обойти это, это было немного сложно, но стоило чистого эффекта.

Создайте класс верхнего регистра.
```
.text-uppercase {
    text-transform:uppercase;
}
```

Привязать к событию keydown.

Привязка к событию keydown была важна для того, чтобы класс добавлялся до того, как символ был виден. Привязка к нажатию или клавиатуре оставила кратковременное мерцание строчной буквы.

$('input').on('keydown', function(e)
{
    // Visually Friendly Auto-Uppercase
    var $this = $(this);

    // 1. Length of 1, hitting backspace, remove class.
    if ($this.val().length == 1 && e.which == 8)
    {
        $this.removeClass('text-uppercase');
    }

    // 2. Length of 0, hitting character, add class.
    if ($this.val().length == 0 && e.which >= 65 && e.which <= 90)
    {
        $this.addClass('text-uppercase');
    }
});

Преобразование в верхний регистр при отправке на сервер.
```
var myValue = this.value.toUpperCase();
```

YMMV, вы можете обнаружить, что резка текста или удаление текста с помощью клавиши удаления может не удалить класс. Вы можете изменить keydown, чтобы также учитывать символ удаления.

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

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

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

Ответ 6

JQuery

var inputs = $('#foo');

inputs.each(function(){
          this.style.textTransform = 'uppercase';
       })
       .keyup(function(){
          this.value = this.value.toUpperCase();
       });

Установите стиль ввода в капители (так что пользователь не видит изменения)
Автоматическая настройка значения (поэтому пользователю не нужно удерживать сдвиг или использовать блокировку кнопок)

Ответ 7

Выше ответов довольно хорошо, просто нужно добавить короткую форму для этого

 <input type="text" name="input_text"  onKeyUP="this.value = this.value.toUpperCase();">

Ответ 8

Это сработало для меня

jQuery(document).ready(function(){ 
        jQuery('input').keyup(function() {
            this.value = this.value.toLocaleUpperCase();
        });
        jQuery('textarea').keyup(function() {
            this.value = this.value.toLocaleUpperCase();
        });
 });

Ответ 9

Я успешно использую этот код для изменения прописных букв

$(document).ready(function(){
$('#kode').keyup(function()
{
    $(this).val($(this).val().toUpperCase());
});
});
</script>

в бутстрапах html-тегов

<div class="form-group">
                            <label class="control-label col-md-3">Kode</label>
                            <div class="col-md-9 col-sm-9 col-xs-12">
                                <input name="kode" placeholder="Kode matakul" id="kode" class="form-control col-md-7 col-xs-12" type="text" required="required" maxlength="15">
                                <span class="fa fa-user form-control-feedback right" aria-hidden="true"></span>
                            </div>
                        </div>

Ответ 10

Решение 1 (Элегантный подход с отличным пользовательским интерфейсом)

HTML

<input id="inputID" class="uppercase" name="inputName" value="" />

CSS

.uppercase{
    text-transform: uppercase;
}

$('#inputID').on('blur', function(){
    this.value = this.value.toUpperCase();
});

Используя CSS text-transform: uppercase;, вы устраняете анимацию строчных и прописных букв, когда пользователь вводит данные в поле.

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

Решение 2 (Отлично, но менее элегантно)

Если вы настаиваете на использовании keyup, вот оно...

$('#inputID').on('keyup', function(){
    var caretPos = this.selectionStart;
    this.value = this.value.toUpperCase();
    this.setSelectionRange(caretPos, caretPos);
});

Пользователь будет замечать анимацию строчных и прописных букв при вводе в поле. Он выполняет свою работу.

Решение 3 (Просто сделайте свою работу)

$('#inputID').on('keyup', function(){
    this.value = this.value.toUpperCase();
});

Этот метод чаще всего предлагается, но я не рекомендую.

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

Ответ 11

Я работаю с telerik radcontrols, почему я нахожу элемент управления, но вы можете найти элемент управления напрямую, как: $ ( '# IdExample'). CSS ({

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

Код Javascript:

<script type="javascript"> 
function changeToUpperCase(event, obj) {
var txtDescripcion = $("#%=RadPanelBar1.Items(0).Items(0).FindControl("txtDescripcion").ClientID%>");
             txtDescripcion.css({
                 "text-transform": "uppercase"
             });
} </script>

Код ASP.NET

<asp:TextBox ID="txtDescripcion" runat="server" MaxLength="80" Width="500px"                                                             onkeypress="return changeToUpperCase(event,this)"></asp:TextBox>

Ответ 12

Убедитесь, что поле имеет этот атрибут в своем html.

ClientIDMode="Static"