#фишка дня
Как подсказать пользователю мобильного устройства, что сейчас произойдёт при отправке формы?
Места на экране мало, ещё и клавиатура съест.
Очень просто! Использовать атрибут enterkeyhint!
Спека: https://html.spec.whatwg.org/multipage/interaction.html#input-modalities:-the-enterkeyhint-attribute
Поддержка: https://caniuse.com/?search=enterkeyhint
Пользуемся!
#mobile #form #html
Как подсказать пользователю мобильного устройства, что сейчас произойдёт при отправке формы?
Места на экране мало, ещё и клавиатура съест.
Очень просто! Использовать атрибут enterkeyhint!
Спека: https://html.spec.whatwg.org/multipage/interaction.html#input-modalities:-the-enterkeyhint-attribute
Поддержка: https://caniuse.com/?search=enterkeyhint
Пользуемся!
#mobile #form #html
❤40👍3🤩1
#фишка дня
Есть псевдокласс :disabled, который выберет отключенные поля. Есть псевдокласс :read-only, который выберет недоступные для ввода поля (только для чтения).
Вот только есть нюанс.
Отключенные поля они так-то тоже для ввода недоступны. Как же тогда быть?
Использовать селектор атрибута: [readonly].
Пример: https://codepen.io/elad2412/pen/wvpmjGR
Отличие disabled-полей от readonly: первые не отправятся с формой вообще, а значение вторых просто нельзя изменить.
Скелетон вернётся с новыми подробностями о фронтенде завтра.
#css #html #input
Есть псевдокласс :disabled, который выберет отключенные поля. Есть псевдокласс :read-only, который выберет недоступные для ввода поля (только для чтения).
Вот только есть нюанс.
Отключенные поля они так-то тоже для ввода недоступны. Как же тогда быть?
Использовать селектор атрибута: [readonly].
Пример: https://codepen.io/elad2412/pen/wvpmjGR
Отличие disabled-полей от readonly: первые не отправятся с формой вообще, а значение вторых просто нельзя изменить.
Скелетон вернётся с новыми подробностями о фронтенде завтра.
#css #html #input
❤26👍4🤨1
#фишка дня
Есть псевдокласс :disabled, который выберет отключенные поля. Есть псевдокласс :read-only, который выберет недоступные для ввода поля (только для чтения).
Вот только есть нюанс.
Отключенные поля они так-то тоже для ввода недоступны. Как же тогда быть?
Использовать селектор атрибута: [readonly].
Пример: https://codepen.io/elad2412/pen/wvpmjGR
Отличие disabled-полей от readonly: первые не отправятся с формой вообще, а значение вторых просто нельзя изменить.
Скелетон вернётся с новыми подробностями о фронтенде завтра.
#css #html #input #бородач
Есть псевдокласс :disabled, который выберет отключенные поля. Есть псевдокласс :read-only, который выберет недоступные для ввода поля (только для чтения).
Вот только есть нюанс.
Отключенные поля они так-то тоже для ввода недоступны. Как же тогда быть?
Использовать селектор атрибута: [readonly].
Пример: https://codepen.io/elad2412/pen/wvpmjGR
Отличие disabled-полей от readonly: первые не отправятся с формой вообще, а значение вторых просто нельзя изменить.
Скелетон вернётся с новыми подробностями о фронтенде завтра.
#css #html #input #бородач
👍17🔥2
#фишка дня
Как подсказать пользователю мобильного устройства, что сейчас произойдёт при отправке формы?
Места на экране мало, ещё и клавиатура съест.
Очень просто! Использовать атрибут enterkeyhint!
Спека: https://html.spec.whatwg.org/multipage/interaction.html#input-modalities:-the-enterkeyhint-attribute
Поддержка: https://caniuse.com/?search=enterkeyhint
Пользуемся!
#mobile #form #html #бородач
Как подсказать пользователю мобильного устройства, что сейчас произойдёт при отправке формы?
Места на экране мало, ещё и клавиатура съест.
Очень просто! Использовать атрибут enterkeyhint!
Спека: https://html.spec.whatwg.org/multipage/interaction.html#input-modalities:-the-enterkeyhint-attribute
Поддержка: https://caniuse.com/?search=enterkeyhint
Пользуемся!
#mobile #form #html #бородач
👍24🔥3🍌2
#фишка дня
Есть псевдокласс :disabled, который выберет отключенные поля. Есть псевдокласс :read-only, который выберет недоступные для ввода поля (только для чтения).
Вот только есть нюанс.
Отключенные поля они так-то тоже для ввода недоступны. Как же тогда быть?
Использовать селектор атрибута: [readonly].
Пример: https://codepen.io/elad2412/pen/wvpmjGR
Отличие disabled-полей от readonly: первые не отправятся с формой вообще, а значение вторых просто нельзя изменить.
Скелетон вернётся с новыми подробностями о фронтенде завтра.
#css #html #input #бородач
Есть псевдокласс :disabled, который выберет отключенные поля. Есть псевдокласс :read-only, который выберет недоступные для ввода поля (только для чтения).
Вот только есть нюанс.
Отключенные поля они так-то тоже для ввода недоступны. Как же тогда быть?
Использовать селектор атрибута: [readonly].
Пример: https://codepen.io/elad2412/pen/wvpmjGR
Отличие disabled-полей от readonly: первые не отправятся с формой вообще, а значение вторых просто нельзя изменить.
Скелетон вернётся с новыми подробностями о фронтенде завтра.
#css #html #input #бородач
👍19👎3
#фишка дня
Как подсказать пользователю мобильного устройства, что сейчас произойдёт при отправке формы?
Места на экране мало, ещё и клавиатура съест.
Очень просто! Использовать атрибут enterkeyhint!
Спека: https://html.spec.whatwg.org/multipage/interaction.html#input-modalities:-the-enterkeyhint-attribute
Поддержка: https://caniuse.com/?search=enterkeyhint
Пользуемся!
#mobile #form #html #бородач
Как подсказать пользователю мобильного устройства, что сейчас произойдёт при отправке формы?
Места на экране мало, ещё и клавиатура съест.
Очень просто! Использовать атрибут enterkeyhint!
Спека: https://html.spec.whatwg.org/multipage/interaction.html#input-modalities:-the-enterkeyhint-attribute
Поддержка: https://caniuse.com/?search=enterkeyhint
Пользуемся!
#mobile #form #html #бородач
👍30❤1
#инструмент дня
Недавно мы вспомнили о крутой фишке мобильных браузеров: атрибуте enterkeyhint для текстовых полей, позволяющем уточнить поведение клавиши Enter на экранной клавиатуре: https://xn--r1a.website/htmlshit/2516
Пришло время узнать, какие же еще атрибуты стоит использовать и зачем.
А чтобы не раздувать это на миллион постов (я всё равно так сделаю, но попозже), предлагаю взглянуть на интересный инструмент, позволяющий поиграться всеми возможными атрибутами полей форм на мобильных браузерах разом: https://better-mobile-inputs.netlify.app/
Например, вы знали, что есть атрибут для автоматической вставки одноразового кода, присылаемого по SMS?
Вот он там самый первый пример. Со скриншотами того, как выглядит клавиатура на iOS и Android.
Естественно, присутствуют ссылки на документацию, рассмотрены разные комбинации атрибутов. Особенно порадовал полный список автодополнения. Оно, конечно, редко когда правильно работает (зависит от усилий разработчиков), но уж если работает — то это приятно.
#input #attribute #mobile #tool
Недавно мы вспомнили о крутой фишке мобильных браузеров: атрибуте enterkeyhint для текстовых полей, позволяющем уточнить поведение клавиши Enter на экранной клавиатуре: https://xn--r1a.website/htmlshit/2516
Пришло время узнать, какие же еще атрибуты стоит использовать и зачем.
А чтобы не раздувать это на миллион постов (я всё равно так сделаю, но попозже), предлагаю взглянуть на интересный инструмент, позволяющий поиграться всеми возможными атрибутами полей форм на мобильных браузерах разом: https://better-mobile-inputs.netlify.app/
Например, вы знали, что есть атрибут для автоматической вставки одноразового кода, присылаемого по SMS?
Вот он там самый первый пример. Со скриншотами того, как выглядит клавиатура на iOS и Android.
Естественно, присутствуют ссылки на документацию, рассмотрены разные комбинации атрибутов. Особенно порадовал полный список автодополнения. Оно, конечно, редко когда правильно работает (зависит от усилий разработчиков), но уж если работает — то это приятно.
#input #attribute #mobile #tool
👍28❤5
#инструмент дня
Недавно мы вспомнили о крутой фишке мобильных браузеров: атрибуте enterkeyhint для текстовых полей, позволяющем уточнить поведение клавиши Enter на экранной клавиатуре: https://xn--r1a.website/htmlshit/2516
Пришло время узнать, какие же еще атрибуты стоит использовать и зачем.
А чтобы не раздувать это на миллион постов (я всё равно так сделаю, но попозже), предлагаю взглянуть на интересный инструмент, позволяющий поиграться всеми возможными атрибутами полей форм на мобильных браузерах разом: https://better-mobile-inputs.netlify.app/
Например, вы знали, что есть атрибут для автоматической вставки одноразового кода, присылаемого по SMS?
Вот он там самый первый пример. Со скриншотами того, как выглядит клавиатура на iOS и Android.
Естественно, присутствуют ссылки на документацию, рассмотрены разные комбинации атрибутов. Особенно порадовал полный список автодополнения. Оно, конечно, редко когда правильно работает (зависит от усилий разработчиков), но уж если работает — то это приятно.
#input #attribute #mobile #tool #бородач
Недавно мы вспомнили о крутой фишке мобильных браузеров: атрибуте enterkeyhint для текстовых полей, позволяющем уточнить поведение клавиши Enter на экранной клавиатуре: https://xn--r1a.website/htmlshit/2516
Пришло время узнать, какие же еще атрибуты стоит использовать и зачем.
А чтобы не раздувать это на миллион постов (я всё равно так сделаю, но попозже), предлагаю взглянуть на интересный инструмент, позволяющий поиграться всеми возможными атрибутами полей форм на мобильных браузерах разом: https://better-mobile-inputs.netlify.app/
Например, вы знали, что есть атрибут для автоматической вставки одноразового кода, присылаемого по SMS?
Вот он там самый первый пример. Со скриншотами того, как выглядит клавиатура на iOS и Android.
Естественно, присутствуют ссылки на документацию, рассмотрены разные комбинации атрибутов. Особенно порадовал полный список автодополнения. Оно, конечно, редко когда правильно работает (зависит от усилий разработчиков), но уж если работает — то это приятно.
#input #attribute #mobile #tool #бородач
👍15❤3
#инструмент дня
Недавно мы вспомнили о крутой фишке мобильных браузеров: атрибуте enterkeyhint для текстовых полей, позволяющем уточнить поведение клавиши Enter на экранной клавиатуре: https://xn--r1a.website/htmlshit/2516
Пришло время узнать, какие же еще атрибуты стоит использовать и зачем.
А чтобы не раздувать это на миллион постов (я всё равно так сделаю, но попозже), предлагаю взглянуть на интересный инструмент, позволяющий поиграться всеми возможными атрибутами полей форм на мобильных браузерах разом: https://better-mobile-inputs.netlify.app/
Например, вы знали, что есть атрибут для автоматической вставки одноразового кода, присылаемого по SMS?
Вот он там самый первый пример. Со скриншотами того, как выглядит клавиатура на iOS и Android.
Естественно, присутствуют ссылки на документацию, рассмотрены разные комбинации атрибутов. Особенно порадовал полный список автодополнения. Оно, конечно, редко когда правильно работает (зависит от усилий разработчиков), но уж если работает — то это приятно.
#input #attribute #mobile #tool #бородач
Недавно мы вспомнили о крутой фишке мобильных браузеров: атрибуте enterkeyhint для текстовых полей, позволяющем уточнить поведение клавиши Enter на экранной клавиатуре: https://xn--r1a.website/htmlshit/2516
Пришло время узнать, какие же еще атрибуты стоит использовать и зачем.
А чтобы не раздувать это на миллион постов (я всё равно так сделаю, но попозже), предлагаю взглянуть на интересный инструмент, позволяющий поиграться всеми возможными атрибутами полей форм на мобильных браузерах разом: https://better-mobile-inputs.netlify.app/
Например, вы знали, что есть атрибут для автоматической вставки одноразового кода, присылаемого по SMS?
Вот он там самый первый пример. Со скриншотами того, как выглядит клавиатура на iOS и Android.
Естественно, присутствуют ссылки на документацию, рассмотрены разные комбинации атрибутов. Особенно порадовал полный список автодополнения. Оно, конечно, редко когда правильно работает (зависит от усилий разработчиков), но уж если работает — то это приятно.
#input #attribute #mobile #tool #бородач
👍10❤2
#баг дня или история одного апокалипсиса
Знаете, что происходит, если в Firefox ввести в
Он позволяет.
Да, вы видите эти lol, будто это валидное число. Только вот значение value в DOM превращается в пустую строку. Ну типа «я тебе это показал, но делать с этим ничего не буду». Гениально.
Баг #1398528 в Bugzilla живёт с 2017 года. Проблему признают: Firefox нарушает спецификацию WHATWG, согласно которой
Почему не фиксят?
Ответ классический: «а что, если у нас локаль с деванагари и арабскими цифрами, и вообще — как различать запятую и точку?». Ну и правда, лучше пусть вводится вся клавиатура, чем разбираться в сепараторах.
А теперь немного цирка из Chrome:
В Chrome
Ещё веселее: 1e- — тоже "нормально", но 1ee — уже нет. Картинку с барабаном вставите сами.
А если ты вводишь 1,5 в локали, где десятичный — это точка, Chrome может забраковать это, а может и нет — зависит от версии, луны и количества кофе у разработчика.
В итоге: у Firefox можно ввести хоть «привет», и он такой: «ну окей, но это не число». Chrome вроде бы фильтрует, но делает это через лунную призму.
Что же мы делаем? Пишем код, блять!
Мораль: в 2025 году проще создать свою валидацию под конкретный случай, чем надеяться, что браузеры когда-нибудь договорятся.
А баг тем временем отмечает 8 лет жизни, всё ещё «NEW», и, судя по комментариям, будет жить
Баг-репорт: https://bugzilla.mozilla.org/show_bug.cgi?id=1398528
Подпишитесь и следите, если вы, как и мы, верите (нет) в чудеса стандартизации.
P. S. тем временем Firefox пробивает дно за дном. В англоязычном интерфейсе выдаёт мне ошибки валидации на финском языке.
P. P. S. я молчу уже о том, что <input type="number"> вообще нахер не нужен и даже вреден: https://xn--r1a.website/htmlshit/2663
#firefox #bug #input #number
Знаете, что происходит, если в Firefox ввести в
<input type="number"> что-то вроде lol?Он позволяет.
Да, вы видите эти lol, будто это валидное число. Только вот значение value в DOM превращается в пустую строку. Ну типа «я тебе это показал, но делать с этим ничего не буду». Гениально.
Баг #1398528 в Bugzilla живёт с 2017 года. Проблему признают: Firefox нарушает спецификацию WHATWG, согласно которой
input type=number должен принимать только корректные числовые строки. А на деле — буквы, кириллица, эмоджи — всё идёт в бой. Только вот под капотом — пусто. Т.е. ты видишь, что ввёл, но значение не считается валидным. UX? Ну, такое себе.Почему не фиксят?
Ответ классический: «а что, если у нас локаль с деванагари и арабскими цифрами, и вообще — как различать запятую и точку?». Ну и правда, лучше пусть вводится вся клавиатура, чем разбираться в сепараторах.
А теперь немного цирка из Chrome:
В Chrome
<input type="number"> иногда разрешает ввод e, ведь вдруг ты хочешь ввести 1e10 (научную запись). Но если ты просто набрал e, поле становится… валидным. Бинго!Ещё веселее: 1e- — тоже "нормально", но 1ee — уже нет. Картинку с барабаном вставите сами.
А если ты вводишь 1,5 в локали, где десятичный — это точка, Chrome может забраковать это, а может и нет — зависит от версии, луны и количества кофе у разработчика.
В итоге: у Firefox можно ввести хоть «привет», и он такой: «ну окей, но это не число». Chrome вроде бы фильтрует, но делает это через лунную призму.
Что же мы делаем? Пишем код, блять!
Мораль: в 2025 году проще создать свою валидацию под конкретный случай, чем надеяться, что браузеры когда-нибудь договорятся.
А баг тем временем отмечает 8 лет жизни, всё ещё «NEW», и, судя по комментариям, будет жить
Баг-репорт: https://bugzilla.mozilla.org/show_bug.cgi?id=1398528
Подпишитесь и следите, если вы, как и мы, верите (нет) в чудеса стандартизации.
P. S. тем временем Firefox пробивает дно за дном. В англоязычном интерфейсе выдаёт мне ошибки валидации на финском языке.
P. P. S. я молчу уже о том, что <input type="number"> вообще нахер не нужен и даже вреден: https://xn--r1a.website/htmlshit/2663
#firefox #bug #input #number
👍15❤12🫡4🤡1
#баг дня или история одного апокалипсиса
Знаете, что происходит, если в Firefox ввести в
Он позволяет.
Да, вы видите эти lol, будто это валидное число. Только вот значение value в DOM превращается в пустую строку. Ну типа «я тебе это показал, но делать с этим ничего не буду». Гениально.
Баг #1398528 в Bugzilla живёт с 2017 года. Проблему признают: Firefox нарушает спецификацию WHATWG, согласно которой
Почему не фиксят?
Ответ классический: «а что, если у нас локаль с деванагари и арабскими цифрами, и вообще — как различать запятую и точку?». Ну и правда, лучше пусть вводится вся клавиатура, чем разбираться в сепараторах.
А теперь немного цирка из Chrome:
В Chrome
Ещё веселее: 1e- — тоже "нормально", но 1ee — уже нет. Картинку с барабаном вставите сами.
А если ты вводишь 1,5 в локали, где десятичный — это точка, Chrome может забраковать это, а может и нет — зависит от версии, луны и количества кофе у разработчика.
В итоге: у Firefox можно ввести хоть «привет», и он такой: «ну окей, но это не число». Chrome вроде бы фильтрует, но делает это через лунную призму.
Что же мы делаем? Пишем код, блять!
Мораль: в 2026 году проще создать свою валидацию под конкретный случай, чем надеяться, что браузеры когда-нибудь договорятся.
А баг тем временем отмечает 8 лет жизни, всё ещё «NEW», и, судя по комментариям, будет жить
Баг-репорт: https://bugzilla.mozilla.org/show_bug.cgi?id=1398528
Подпишитесь и следите, если вы, как и мы, верите (нет) в чудеса стандартизации.
P. S. тем временем Firefox пробивает дно за дном. В англоязычном интерфейсе выдаёт мне ошибки валидации на финском языке.
P. P. S. я молчу уже о том, что <input type="number"> вообще нахер не нужен и даже вреден: https://xn--r1a.website/htmlshit/2663
#firefox #bug #input #number #бородач
Знаете, что происходит, если в Firefox ввести в
<input type="number"> что-то вроде lol?Он позволяет.
Да, вы видите эти lol, будто это валидное число. Только вот значение value в DOM превращается в пустую строку. Ну типа «я тебе это показал, но делать с этим ничего не буду». Гениально.
Баг #1398528 в Bugzilla живёт с 2017 года. Проблему признают: Firefox нарушает спецификацию WHATWG, согласно которой
input type=number должен принимать только корректные числовые строки. А на деле — буквы, кириллица, эмоджи — всё идёт в бой. Только вот под капотом — пусто. Т.е. ты видишь, что ввёл, но значение не считается валидным. UX? Ну, такое себе.Почему не фиксят?
Ответ классический: «а что, если у нас локаль с деванагари и арабскими цифрами, и вообще — как различать запятую и точку?». Ну и правда, лучше пусть вводится вся клавиатура, чем разбираться в сепараторах.
А теперь немного цирка из Chrome:
В Chrome
<input type="number"> иногда разрешает ввод e, ведь вдруг ты хочешь ввести 1e10 (научную запись). Но если ты просто набрал e, поле становится… валидным. Бинго!Ещё веселее: 1e- — тоже "нормально", но 1ee — уже нет. Картинку с барабаном вставите сами.
А если ты вводишь 1,5 в локали, где десятичный — это точка, Chrome может забраковать это, а может и нет — зависит от версии, луны и количества кофе у разработчика.
В итоге: у Firefox можно ввести хоть «привет», и он такой: «ну окей, но это не число». Chrome вроде бы фильтрует, но делает это через лунную призму.
Что же мы делаем? Пишем код, блять!
Мораль: в 2026 году проще создать свою валидацию под конкретный случай, чем надеяться, что браузеры когда-нибудь договорятся.
А баг тем временем отмечает 8 лет жизни, всё ещё «NEW», и, судя по комментариям, будет жить
Баг-репорт: https://bugzilla.mozilla.org/show_bug.cgi?id=1398528
Подпишитесь и следите, если вы, как и мы, верите (нет) в чудеса стандартизации.
P. S. тем временем Firefox пробивает дно за дном. В англоязычном интерфейсе выдаёт мне ошибки валидации на финском языке.
P. P. S. я молчу уже о том, что <input type="number"> вообще нахер не нужен и даже вреден: https://xn--r1a.website/htmlshit/2663
#firefox #bug #input #number #бородач
👍12❤3👎1🫡1