Меняем Enter виртуальной клавиатуры | HTML Атрибут enterkeyhint

[@AleksanderLamkov]

📌 Друзья, в телеграмме у нас есть канал и отдельный чат, где вы можете задать вопрос по фронтенд-разработке и вам постараются помочь: 💬 Чат: @friendlyFrontendChat ℹ Основной канал: @friendlyFrontend Если вам это интересно, присоединяйтесь, задавайте вопросы и помогайте другим 🙂

[@rave4130]

Я подумал, что можно на произвольный текст поменять будет, эхх, вот это было бы весело)

[@AnnaMIHALKE]

Можно же так сделать, но только с помощью JS

[@AleksanderLamkov]

Разве через JS есть доступ к виртуальной клавиатуре устройства?

[@kalts_daniil]

Саша, где ты был раньше?) 😂 Очень годно, спасибо)

[@AndrewT-e6f]

Вот это действительно тайное знание 😅 Сколько работаю о таком атрибуте не слышал, годная штука)

[@ДанилСуханов-о4у]

Ну это реально годно, спасибо автор

[@NeoCoding]

отлично будем знать! спасибо

[@ВладимирРудченко-л1э]

Быстро, понятно и очень полезно

[@vapoltavecs]

У вас классные видео, у меня почти 3 года коммерческого опыта, работаю мидл фронтом и все равно каждый раз узнаю что то новое) можете пожалуйста снять что то про оптимизацию производительности и оптимизацию загрузки? Было бы интересно послушать от вас

[@AleksanderLamkov]

Привет! Спасибо за фидбек и идею, взял на заметку :)

[@palach_666]

Это кайф

[@yourtyk]

Оххх, спасибо тебе внучок, а я раньше даже не ведомол об этом

[@KonfetyDetyam]

Лайк, подписка

[@dragonman324]

Кто-то смотрит на эту кнопку? Вроде, все уже привыкли неглядя нажимать на неё

[@AleksanderLamkov]

Мелочь, конечно, но всё равно же здорово, что интерфейс приложения можно сделать чуточку интуитивно понятнее :)

[@dragonman324]

@@AleksanderLamkov, ну, тоже верно

[@rmzvoid]

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

[@user-tw6qx7dx2r]

Поведение по нажатию на enter, как понимаю, от этого атрибута не меняется?

[@AleksanderLamkov]

Верно, не меняется.

[@Screxyy]

🤯🤯🤯🤯

[@miwanjaGR]

sheeeeeeeesh

[@SENSEi__007]

Placeholder?

[@AleksanderLamkov]

Да, для демонстрации дополнительно фоном добавлял placeholder к полям ввода, чтобы зрителям было понятнее, что к чему :)

[@sawertsand]

Работает только на ios калтвиатурах? Или на каждую отдельную надо прлверку делать?

[@AleksanderLamkov]

На виртуальных клавиатурах любых устройств, ну по крайней мере на андроид и iOS точно работает.

[@waiso55]

Так есть placeholder

[@AleksanderLamkov]

Этот атрибут для другого функционала.

[@Хорошийдруг-ц8ы]

И смысл, если событие на кнопке все равно одинаковое.

[@AleksanderLamkov]

Семантика, более понятное действие. Если это многоэтапная анкета, то текст «Next» (далее) будет удобнее, чем «Return» (возвращение), согласись :) Ну и если это поле поиска, то «Search» будет в самый раз, нежели дефолтная надпись.

[@timur.shhhhh]

Хорошо, человек нажмет “search” а как это отследить? Типо событие “Enter”?

[@AleksanderLamkov]

Это событие формы submit.

[@timur.shhhhh]

@@AleksanderLamkov а если событие next, то переключение на следующий input? Есть какая-то статья про это?

[@AleksanderLamkov]

Не совсем. Будет отправка формы. Атрибут enterkeyhint не меняет оригинальную логику нажатия на клавишу Enter виртуальной клавиатуры. Если пользователь на тач-устройстве взял инпут в фокус и тапает на клавиатуре Enter (Next, Search, не принципиально), то всегда будет срабатывать попытка отправки формы (событие submit), в которой находится поле ввода.

[@timur.shhhhh]

@@AleksanderLamkov как-то даже обидно, что Apple и возможно Android - не позаботились, и усложнили работу разработчиков

[@yakent3205]

Я который даже не читаю, что написано на кнопке enter😂 вить это вполне логично все привыкли к тому что ты нажимаешь enter и все данные отправляются

[@hhddasn]

Доhad

[@alexshel8578]

бро.. тебя не беспокоит что ты выглядишь и ведешь себя как робот?))

[@AleksanderLamkov]

Ещё скажи, что как лицо, сгенерированное нейросетью 😅 Наверное из-за низкого ФПС есть небольшой такой эффект и из-за резких склеек, но это следствие моих неудачных экспериментов с монтажом, с этим в последних шортсах уже поработал 🙂

[@ДмитрийШибаев-г1р]

А ведь таким образом в плейсхолдер можно написать любой текст... Прикольная фича. Спасибо

[@AleksanderLamkov]

С placeholder тема видео не связана. Я добавил его в разметку, чтобы демонстрация была нагляднее.

[@alexleshenko]

😂 нерстальщики по-любому знают, но нам только ты открыл глаза😂

[@НиколайШ-ю3е]

"Как запутать пользователя ещё больше?" Вот правильное название видео.

[@Jerry-om2xc]

А в чем прикол? 😅

[@erroringame7446]

У меня стрелка

[@zhoj]

У меня галочка

[@kirillgubanov6120]

Да ну нафиг

[@Savux24]

Чего бля