1

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

Я нашел где-то вариант регулярного выражения и использовал атрибут pattern

<input type="text" name="name" pattern="^[^\s]+(\s.*)?$">

Однако при таком способе строка будет проверяться при отправке формы, но писать в поле все равно можно что угодно.

А я бы хотел, чтобы вообще физически нельзя было вводить в поле пробелы, пока не веден хоть один другой символ. Я подумал здесь можно использовать JavaScript c атрибутом событий oninput, но я со скриптом практически не знаком, та что не знаю, как это провернуть.

1
  • 1
    Нет, не надо физически запрещать что-то вводить - это тупиковый путь, который плохо работает на мобильных устройствах, тяжело делать и вообще это не юзер френдли. 10 янв 2019 в 14:37

1 ответ 1

1

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

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

input.oninput = () => {
  if(input.value.charAt(0) === ' ') {
    input.value = '';
  }
}
<input id="foo" type="text" />

5
  • 1
    зачем chartAt использовать, если можно просто value[0]?
    – Dmytro
    10 янв 2019 в 14:55
  • @Дмытрык, это всего лишь ещё один и возможных вариантов.
    – meine
    10 янв 2019 в 15:07
  • Спасибо большое, попробую.
    – SoulDrake
    10 янв 2019 в 15:29
  • И за предостережение спасибо, я не думал о таком. Просто я не хотел делать какие-то предупреждения, в случае ошибки, по стилю это не впишется у меня. А без этого юзеру может быть не понятно, почему форма не отправилась. Вот я и подумал, что лучше вообще запретить возможность ввода.
    – SoulDrake
    10 янв 2019 в 15:31
  • Все бы хорошо, но вы не запретили события: вставка из буфера обмена, автокомплит в мобильных а также drag&frop. К тому же, у вас запрет на ввод пробела первым символом, т.е. если сначала ввести "123" а потом поставить пробел перед "1" то все сотрется. 11 янв 2019 в 8:33

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.