keyup Проблема с заглавными буквами

Question

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

HTML

<input id="test"/>

Javascript (с jQuery)

$("#test").keyup(function(){
  this.value = this.value.toUpperCase();
});

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

Пример: http://jsbin.com/omope3

Answer 1

Или вы можете использовать следующее (это, вероятно, быстрее и элегантнее):

<input style="text-transform: uppercase" type='text'></input>

Но при этом введенное значение будет отправлено обратно в данные формы, поэтому используйте одно из следующих действий, чтобы сохранить его в базе данных в виде заглавных букв:

MySQL: UPPER(str)

PHP: strtoupper()

Answer 2

Другое решение, если вы используете преобразование текста:верхний регистр;CSS-свойство:

<input id='test' style='text-transform: uppercase;' type='text'></input>

А с помощью jQuery вы сможете выбрать событие размытия:

$("#test").blur(function(){
  this.value = this.value.toUpperCase();
});

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

Answer 3

Использовать это:

<input onkeyup="MakeMeUpper(this)" type="text"/>

И в вашей части кода JS поместите:

function MakeMeUpper(f, e){ 
  var actualValue = f.value;        
  var upperValue = f.value.toUpperCase();
  if( actValue != upperValue){
    f.value = upperValue;       
  }   
}

Этот код не изменит текст, если пользователь ввел что-то, что не является текстом (стрелка влево или вправо).

Answer 4

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

$("#test").keyup(function(){
  var upper = this.value.toUpperCase();
  if (this.value != upper) 
      this.value = upper;
});

который изменит значение только в том случае, если его необходимо изменить.Однако при этом у вас все равно остается проблема: если вы наберете abd, двигаться влево, ударить c получить abcd, курсор все равно переместится в конец.

Answer 5

Javascript (с jQuery)

$("#test").keyup(function(){
  $(this).val($(this).val().toUpperCase());
});

Answer 6

var str = $(this).val();
if (evt.keyCode != 37 && evt.keyCode != 39)
{
    str = str.toLowerCase().replace(/\b[a-z]/g, function(letter) {
        return letter.toUpperCase();
    });
    $(this).val(str);
}

Answer 7

Вероятно, вы захотите посмотреть keyCode в своей функции keyup.

var UP_ARROW = 38,
    DOWN_ARROW = 40;

$('#test').keyup(function(evt){
    if (evt.keyCode == UP_ARROW)
    {
        this.value = this.value.toUpperCase();
    }

    if (evt.keyCode == DOWN_ARROW)
    {
        this.value = this.value.toLowerCase();
    }
});