keyup Проблема с заглавными буквами
-
19-09-2019 - |
Вопрос
Я хотел бы иметь ввод, который будет меняться на верхний регистр при нажатии клавиши.Поэтому я прикрепляю простое событие на клавиатуре.
HTML
<input id="test"/>
Javascript (с jQuery)
$("#test").keyup(function(){
this.value = this.value.toUpperCase();
});
Но я обнаружил, что в Chrome и IE, когда вы нажимаете стрелку влево, курсор автоматически перемещается в конец.Я заметил, что должен определить, является ли ввод только буквой.Должен ли я использовать диапазон кодов клавиш или регулярное выражение для обнаружения?
Пример: http://jsbin.com/omope3
Решение
Или вы можете использовать следующее (это, вероятно, быстрее и элегантнее):
<input style="text-transform: uppercase" type='text'></input>
Но при этом введенное значение будет отправлено обратно в данные формы, поэтому используйте одно из следующих действий, чтобы сохранить его в базе данных в виде заглавных букв:
MySQL: UPPER(str)
PHP: strtoupper()
Другие советы
Другое решение, если вы используете преобразование текста:верхний регистр;CSS-свойство:
<input id='test' style='text-transform: uppercase;' type='text'></input>
А с помощью jQuery вы сможете выбрать событие размытия:
$("#test").blur(function(){
this.value = this.value.toUpperCase();
});
Благодаря этому решению вам не нужно перекрывать поля базы данных, вы можете использовать курсор для перемещения, а пользователь может вставлять/переписывать текст в поле ввода.
Использовать это:
<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;
}
}
Этот код не изменит текст, если пользователь ввел что-то, что не является текстом (стрелка влево или вправо).
Да, похоже, некоторые браузеры перемещают курсор в конец, когда значение обновляется.Вы можете сделать это:
$("#test").keyup(function(){
var upper = this.value.toUpperCase();
if (this.value != upper)
this.value = upper;
});
который изменит значение только в том случае, если его необходимо изменить.Однако при этом у вас все равно остается проблема: если вы наберете abd
, двигаться влево, ударить c
получить abcd
, курсор все равно переместится в конец.
Javascript (с jQuery)
$("#test").keyup(function(){
$(this).val($(this).val().toUpperCase());
});
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);
}
Вероятно, вы захотите посмотреть 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();
}
});