Как правильно написать скрипт, который будет приводить введенные пользователем данные к верхнему регистру на JS/jQuery?

Question

[SvetlanaDubovik]

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

$('#vin1').keydown(function () {   
    var vinval = '';
        vinval = $(this).val();
    var count = vinval.length;
  
    $('input#vin1').val(vinval.toUpperCase());   (*)

    if (count < 17) {
      $('button#btn1').attr('disabled', 'true');
    } else if (count == 17) {
      $('button#btn1').removeAttr('disabled');
    }
  });

На компьютерах все нормально работает, а на планшете происходит копирование введенной пользователем подстроки. Проблема, видимо, в строке, помеченной *. Но почему тогда на компьютере не копирует введенные подстроки? И как тогда правильно реализовать данную задумку?

Comments

[Stalker_RED]

На каком планшете, в каком браузере? Другой браузер пробовали?

[SvetlanaDubovik]

да, пробовала. планшет Prestigio, Android5, opera и chrome

Answer 1

[Владислав]

А зачем это делать скриптом, если можно стилями преобразовать в верхний регистр?
в css
#vin1 {
text-transform: uppercase;
}
А потом при отправке на сервер или на сервере уже преобразовать в верхний регистр

Comments

[SvetlanaDubovik]

у меня тогда и подсказка в верхнем регистре выводится

[Владислав]

SvetlanaDubovik: placeholder?

[Владислав]

SvetlanaDubovik: скриптом проверяете пустое поле или нет. Если пустое - дописываете класс, например "vin-no-empty"
и в css
.vin-no-empty {
text-transform: uppercase;
}

[SvetlanaDubovik]

да. можно, наверное использовать селектор атрибутов?

[SvetlanaDubovik]

Afadeev: а как проверить, что поле пустое?

[Владислав]

SvetlanaDubovik:
$('#vin1').on('keyup', function () {
if ($(this).val() != '') {
$(this).addClass('vin-no-empty');
} else {
$(this).removeClass('vin-no-empty');
}
});

[SvetlanaDubovik]

Afadeev: Спасибо за подсказку. Все получилось. Но есть еще один вопрос, может поможете. на поле инпут стоит ограничение по вводу символов,

<input type="text" class="form-control" placeholder="Введите  номер " id="vin1" maxlength="17" pattern="^[a-zA-Z0-9]+$" required>

но планшет не понимает этого. Почему такое может быть?

[Владислав]

Еще как вариант, через псевдоселекторы
-webkit-input-placeholder для Chrome/Safari/Opera
-ms-input-placeholder для IE.
-ms-input-placeholder для Edge

Но в старых IE работать не будет

[Владимир]

Afadeev: проверить поле на пустоту тоже можно средствами css: https://webref.ru/css/empty

[SvetlanaDubovik]

Владимир: Спасибо.

[Владислав]

SvetlanaDubovik: Видимо браузер у планшета или старый или нестандартный и не понимает этот атрибут. Лучше сделать на jQuery. Подключите библиотеку digitalbush.com/projects/masked-input-plugin она все это умеет и кроссбраузерная

[Владислав]

Владимир: Как раз таки им поле на пустоту не проверить =)

[Владислав]

Если IE9 не поддерживаете, то можно сделать так:
в CSS
#vin1:valid { text-transform: uppercase }

а в input поставить атрибут required (вроде уже стоит =) )

[Владимир]

Afadeev: пожалуй, да. Стал гуглить, наткнулся на такой трюк: https://goo.gl/p52E5D, но пробовать некогда, нужно уходить...
P.S. Впрочем, всё это костыли. Не люблю я их.