Комментарии 98
Огромное спасибо
+9
Example -> выделить -> Ctrl + V в поле с первым инпутом, (неотпуская crtl с прошлого раза) CTRL + Z
Если в первый импут вставить и попытаться нажать CTRL + A (я так всегда делаю, чтоб выделить и заменить) — то перескакиваем на второй импут, ещё до нажатия на A
Как то по мне не удобненько
Если в первый импут вставить и попытаться нажать CTRL + A (я так всегда делаю, чтоб выделить и заменить) — то перескакиваем на второй импут, ещё до нажатия на A
Как то по мне не удобненько
+3
Второй пункт с CTRL+A срабатывает, если курсором ткнуть в конец текста в инпуте.
0
А в «Credit Card Example» такой баг не наблюдается.
0
+Delete не работает между инпутами. Chrome 20 (омг, еще недавно был 10!), Linux x86.
+1
У меня в хроме и фаерфоксе, если находиться в конце инпута и нажать просто на Ctrl, то перескакивает на следующий инпут. Думаю, это не сложно исправить :-)
+1
Спасибо, буду исправлять.
+1
Исправил, спасибо.
0
Спасибо, удобная вещь. Не планируется ли возможность перезаписи существующих значений полей? Пример: заполнили все поля двойками, потом стрелками переместились в первое поле, и зажали тройку. Сейчас просто ничего не произойдет, а было бы здорово иметь возможность заменять текущее значение новым.
0
В примере пробелы съелись.
0
Чем не люблю такие поля — никогда не знаешь примет ли оно все значение целиком или придется копировать каждую часть по-отдельности.
+19
>> Как сделать группу инпутов удобными
Отказаться от группы инпутов и сделать один-единственный инпут. Номер карты позволить вводить через дефисы, через пробелы или слитно, код в номере телефона — в скобках, через дефис или через пробел.
Отказаться от группы инпутов и сделать один-единственный инпут. Номер карты позволить вводить через дефисы, через пробелы или слитно, код в номере телефона — в скобках, через дефис или через пробел.
+39
Как вариант (можно в ненормальное программирование)
1 импут, наверстать на нём маленькие дивы вертикальными разделителями, и яваскриптом сделать вставку пробелов через каждые 4 символа.
1 импут, наверстать на нём маленькие дивы вертикальными разделителями, и яваскриптом сделать вставку пробелов через каждые 4 символа.
0
В jquery кстати есть плагин для ввода по маске, он сам разбивает текст по заданному шаблону, вставляет недостающие символы, вырезает лишние и вообще довольно умный + корректно работает с историей ввода реализованной как самим браузером так и сторонними плагинами того же jquery
+4
НЛО прилетело и опубликовало эту надпись здесь
сейчас ниже столько плагинов накидают :)
Надо только подождать, всё интересное в комментах, как всегда.
Надо только подождать, всё интересное в комментах, как всегда.
+1
Да вот коммент написал а сам пошел вспоминать проект где использовал и искать)
jquery.maskedinput звать
Выбирал из нескольких, понравился этот. Самое в нем приятное, что служебные символы в маске, которые задаешь сам — например для номера (926) 234-2455 служебными могут быть (___) ___-____
Эти символы как будто живут «вне» инпута и их нельзя удалить, перенести или вообще как-либо испортить, они всегда будут стоять на своих местах. При этом они нормально копируются вместе с текстом и не мегают вставке и вводу (курсор через них «перепрыгивает»)
jquery.maskedinput звать
Выбирал из нескольких, понравился этот. Самое в нем приятное, что служебные символы в маске, которые задаешь сам — например для номера (926) 234-2455 служебными могут быть (___) ___-____
Эти символы как будто живут «вне» инпута и их нельзя удалить, перенести или вообще как-либо испортить, они всегда будут стоять на своих местах. При этом они нормально копируются вместе с текстом и не мегают вставке и вводу (курсор через них «перепрыгивает»)
+1
Вот этот плагин на основе маскединпута, но гораздо круче
github.com/RobinHerbots/jquery.inputmaskhttps://github.com/RobinHerbots/jquery.inputmask
github.com/RobinHerbots/jquery.inputmaskhttps://github.com/RobinHerbots/jquery.inputmask
0
В опере вставка не работает
+1
Вы что, судя по последним тенденциям большинство веб разработчиков вообще оперу за браузер не считают.
+8
Исправил, проверял в 12ой, спасибо.
0
А кто-то всё это вводит вручную? Проще сохранить в текстовый файлик или keepass, да копипастить…
-1
Неоднократно нарывался на неприятный момент в таких разделенных инпутах (особенно при установке Windows старых версий), когда глядя то в бумажку, то на клавиатуру пропускаешь один символ или вставляешь лишний. В вашем плагине при удалении символа в середине, правая часть не подтягивается влево. И добавить в середину тоже невозможно.
0
Есть прекрасный плагин inputmask, который как раз позволяет в пределах одного инпута делать любые разделители. Это гораздо удобнее, чем возиться с энным количеством инпутов (не говоря уже о том, что на сервере это потом в одно значение надо собирать).
+7
Это же стартап, там дух делать свои изобретения ещё не угас.
А за плагин плюсик, он действительно делает свою работу.
А за плагин плюсик, он действительно делает свою работу.
+2
Мало того собирать на стороне сервера, это потом еще (когда человек захочет, например, отредактировать номер телефона) — обратно надо разбирать все на инпуты.
0
Мне нравится вот этот плагин. Тут его продолжение. Очень удобно.
+1
Мне всё-таки кажется, при попытке вставить срок годности карты со случайно захваченным пробелом спереди его стоит вычистить.
0
После вставки через ctrl+v, если решишь перезаписать номер вручную, то не стирается предыдущее значение за курсором. Т.е. по моему у таких контролов должен быть что-то вроде replace mode, т.к. сейчас складывается ощущение что вообще readonly пока не выделишь и не удалишь. (chromium + ubuntu x64) последние версии.
0
ITU-T recommendation E.123 describes how to represent an international telephone number in writing or print, starting with a plus sign ("+") and the country code.
для кого эти стандарты пишут не понятно, тем более и jotsky.com вы сделали на английском, если б делали для одной страны ладно уже можно было и без "+".
для кого эти стандарты пишут не понятно, тем более и jotsky.com вы сделали на английском, если б делали для одной страны ладно уже можно было и без "+".
+1
А что насчет телефонов то в итоге? Сделали какое-нибудь решение?
Приведенное решение по очевидным причинам не подходит:
«Код страны», для русскоговорящей аудитории — +7 либо +375 либо +380 либо многие указывают «8». Т. е. maxlength мне какой ставить? 1, 2, 3 или 4?
«Код города» — от 3 до 5 цифр, например 495 у Москвы или 83531 у Алатыря
maxlength 3 или 5?
Соответственно последнее поле (номер телефона) — от 7 до 5 цифр в зависимости от города.
maxlength — 7? А если человек хочет указать добавочный (для корп. пользователей например распространенный формат +7 495 123-45-67 (доб. 231)
Приведенное решение по очевидным причинам не подходит:
«Код страны», для русскоговорящей аудитории — +7 либо +375 либо +380 либо многие указывают «8». Т. е. maxlength мне какой ставить? 1, 2, 3 или 4?
«Код города» — от 3 до 5 цифр, например 495 у Москвы или 83531 у Алатыря
maxlength 3 или 5?
Соответственно последнее поле (номер телефона) — от 7 до 5 цифр в зависимости от города.
maxlength — 7? А если человек хочет указать добавочный (для корп. пользователей например распространенный формат +7 495 123-45-67 (доб. 231)
+1
НЛО прилетело и опубликовало эту надпись здесь
Некоторые люди, когда у них спрашивают номер телефона — вводят свой городской номер и не парятся.
А ты гадай, из какого он города (или вообще — страны, если сайт ориентирован на СНГ)
Поля «код страны» и «код города» служат напоминанием, что надо указать эти сведения.
Masked Input и иже с ними — не панацея:
Во-первых, если человеку предлагается ввести номер телефона, а поле ввода выглядит примерно так:
это вводит его в небольшой ступор — причины объяснил выше:
1. У старшего поколение сам такой внешний вид поля может вызвать недопонимание
2. У пользователей из Украины и Беларуси код страны это 3 цифры а не одна. Если человек хочет указать бесплатный номер (8-800) указывать его в формате +7 800 не совсем верно.
3. У пользователей из региональных городов в коде города может быть 4-5 цифр, а сам номер телефона — соответственно 6-5 цифр
4. Если сайт ориентирован на корпоративных пользователей (которым как раз удобнее указывать городские номера) — им также удобно в поле «номер телефона» указывать сразу в скобках добавочный. Либо для добавочного делать отдельное поле.
А ты гадай, из какого он города (или вообще — страны, если сайт ориентирован на СНГ)
Поля «код страны» и «код города» служат напоминанием, что надо указать эти сведения.
Masked Input и иже с ними — не панацея:
Во-первых, если человеку предлагается ввести номер телефона, а поле ввода выглядит примерно так:
+_ (___) ___-__-__
это вводит его в небольшой ступор — причины объяснил выше:
1. У старшего поколение сам такой внешний вид поля может вызвать недопонимание
2. У пользователей из Украины и Беларуси код страны это 3 цифры а не одна. Если человек хочет указать бесплатный номер (8-800) указывать его в формате +7 800 не совсем верно.
3. У пользователей из региональных городов в коде города может быть 4-5 цифр, а сам номер телефона — соответственно 6-5 цифр
4. Если сайт ориентирован на корпоративных пользователей (которым как раз удобнее указывать городские номера) — им также удобно в поле «номер телефона» указывать сразу в скобках добавочный. Либо для добавочного делать отдельное поле.
+3
Как по мне, так такого плана поля крайне неудобны.
Почему не сделать 1 поле и уже на сервере разбивать значение как душе угодно? На клиенте по желанию, можно по событию (теряет фокус, достигает определенного кол-ва символов, таймаут) привести к нужному формату (добавить + к номеру телефона, разбить на группы и т.д.).
Почему не сделать 1 поле и уже на сервере разбивать значение как душе угодно? На клиенте по желанию, можно по событию (теряет фокус, достигает определенного кол-ва символов, таймаут) привести к нужному формату (добавить + к номеру телефона, разбить на группы и т.д.).
+1
НЛО прилетело и опубликовало эту надпись здесь
НЛО прилетело и опубликовало эту надпись здесь
по IP определите его город
у нас например офис находится в Казани, но при этом все городские телефоны московские.
не возникает подозрения, что в 7 введенных символах не уместить код города и телефонвозникает, потому что в номере телефона должно быть 10 цифр + код страны.
Понятно, что можно сделать, например, всплывающую подсказку «не забудьте указать код города» если человек ввел меньше 10 цифр.
Но, все-таки лично я считаю, что гораздо лучше пользователю сразу дать понять, что от него хотят, чем потом ему напоминать и заставлять возвращаться к полю, которое он уже заполнил.
И для этого поля «код города» — «номер телефона», как мне кажется, прекрасно выполняют свою функцию.
+1
И для этого поля «код города» — «номер телефона», как мне кажется, прекрасно выполняют свою функцию.
А мобильный номер как вводить? Там «кода города», формально нет.
А чем вам не нравиться вариант с примером норма в самой форме (ну или рядом). Когда видишь в каком формате от тебя ждут номер — очень сложно ошибиться.
0
норма в виде
"+_ (___) ___-__-__"?
Я уже два раза ответил на этот вопрос — тем, что количество цифр в коде страны, города и номере телефона разное в разных городах и странах
Как показывает практика, пользователи в таком случае либо первые три цифры номера мобильного указывают как «код города» либо заполняют только поля «код страны» — "+7" и оставшуюся часть (912-345-67-89) вводят как «номер телефона», пропуская «код города».
Заметьте, я нигде не уточнял, что «код города» — это обязательное поле. Оно нужно для напоминания (мол не забудьте указать код города), но если его не заполнить, при этом заполнив поле «номер телефона» — валидатор не должен выдавать ошибки.
Обязательное поле «номер телефона». «Код города» и «код страны» — поля-напоминалки.
"+_ (___) ___-__-__"?
Я уже два раза ответил на этот вопрос — тем, что количество цифр в коде страны, города и номере телефона разное в разных городах и странах
Там «кода города»
Как показывает практика, пользователи в таком случае либо первые три цифры номера мобильного указывают как «код города» либо заполняют только поля «код страны» — "+7" и оставшуюся часть (912-345-67-89) вводят как «номер телефона», пропуская «код города».
Заметьте, я нигде не уточнял, что «код города» — это обязательное поле. Оно нужно для напоминания (мол не забудьте указать код города), но если его не заполнить, при этом заполнив поле «номер телефона» — валидатор не должен выдавать ошибки.
Обязательное поле «номер телефона». «Код города» и «код страны» — поля-напоминалки.
0
Я одного не понимаю — зачем просить пользователя разделить код страны, код города и собственно сам номер.
Все равно использовать(т.е. звонить, руками или автоматизировано) нужно только «полный» номер.
Так и не увидел, чем вам не нравиться когда в форме присутвуют напоминалки-напоминалки — т.е. или пример в самом поле, либо пример рядом с полем. Оно же проще и компактнее.
Все равно использовать(т.е. звонить, руками или автоматизировано) нужно только «полный» номер.
«Код города» и «код страны» — поля-напоминалки.
Так и не увидел, чем вам не нравиться когда в форме присутвуют напоминалки-напоминалки — т.е. или пример в самом поле, либо пример рядом с полем. Оно же проще и компактнее.
+1
На андроиде вставляется только в первый инпут. Или андроид не поддерживается?
0
Opera 12.00 — копипаста номера не работает. вставляется только в первый инпут
0
Автору спасибо, было бы не плохо ещё реализовать такую фичу:
при заполненных полях и вставке текста из буфера, скажем со второго символа (или первого), последующие символы заменялись новыми данными
при заполненных полях и вставке текста из буфера, скажем со второго символа (или первого), последующие символы заменялись новыми данными
0
В любом инпуте, кропе последнего, нажатие на End или Ctrl+→ перебрасывает каретку на следующий.
+1
Когда уже появится
<input type="creditcard">
+2
Ник автора показался знакомым, так и оказалось, раньше соотрудничали на фрилансе.
В другой статье из одного административного района человек.
Как узок мир.
А насчет планина, что сказать, не идеален, но весьма добротно реализован.
В другой статье из одного административного района человек.
Как узок мир.
А насчет планина, что сказать, не идеален, но весьма добротно реализован.
0
А нельзя просто отслеживать все события по нажатию кнопок и производить действия с контролами через js (обрубая дефолтную функциональность)?
Предложенное Вами решение мне видится штабелем заплаток, которое не факт, что не стрельнет где-то в каком-то браузере.
Предложенное Вами решение мне видится штабелем заплаток, которое не факт, что не стрельнет где-то в каком-то браузере.
0
А ваше чем не заплатка.
В любом случае костыль получается. Всех вариантов не предусмотреть.
В любом случае костыль получается. Всех вариантов не предусмотреть.
0
Сейчас так и поступают в редакторах кода. И я думал что бы сделать так. Но передумал по двум причинам:
1) Скорость мигания курсора не возможно взять из настроек ОС. Его все эмулируют.
2) Придется верстать инпуты, они не могут быть системными.
1) Скорость мигания курсора не возможно взять из настроек ОС. Его все эмулируют.
2) Придется верстать инпуты, они не могут быть системными.
0
Отлично, спасибо!
И сразу бага: когда курсор находится в конце одного из заполненных инпутов, если при этом нажать Shift, курсор перемещается в следующий инпут. Нелогично это потому, что я нажимаю шифт, чтобы перескочить в предыдущий инпут при помощи Shift+Tab.
И сразу бага: когда курсор находится в конце одного из заполненных инпутов, если при этом нажать Shift, курсор перемещается в следующий инпут. Нелогично это потому, что я нажимаю шифт, чтобы перескочить в предыдущий инпут при помощи Shift+Tab.
0
спасибо
0
Казалось бы такая тривиальная задача, но далеко не всем хватает времени/желания ее реализовать в своих проектах. Спасибо большое.
0
Понасуют кривых скриптов на сайты, а потом сиди и мучайся: то вставка не работает, то выделение, то хрен знает как это заполнять с мобильника.
+10
Вместо использования атрибута class для логики, лучше используйте data-* атрибуты. Оставьте class для представления.
0
Ну, в истории веб дева много чего «принято». Таблицами верстать, 1х1-пиксельными гифами забивать… Плевать на кросс-браузерность и стандарты с высокой колокольни… Но это не значит, что так нужно делать всегда.
То, что оно на синтетическом тесте в два раза медленнее я не спорю, но дело не в этом. Я более чем уверен, что
То, что оно на синтетическом тесте в два раза медленнее я не спорю, но дело не в этом. Я более чем уверен, что
data-*
селекторы в будущем соптимизируют. А вот себя соптимизировать и писать по стандарту можно уже сейчас…-1
НЛО прилетело и опубликовало эту надпись здесь
В iPade демо не срабатывает
0
Чего-то с кодировкой:
asyncTest("paste symbols : [|◊] to [|◊]", function() {
0
Есть большой минус: если я заполнил первый инпут и нажал таб (стандартное поведение), то фокус автоматически переходит на 3-й инпут.
Советую почитать, как с этим боролся Сергей Чикуёнок: chikuyonok.ru/2010/07/simple-things/
Советую почитать, как с этим боролся Сергей Чикуёнок: chikuyonok.ru/2010/07/simple-things/
0
Один инпут всегда лучше нескольких. Лучше — когда данные, введённые в один инпут автоматически проверяются при вводе и при необходимости — разбиваются на группы, видимые пользователю.
0
Зарегистрируйтесь на Хабре, чтобы оставить комментарий
Как сделать группу инпутов удобной