Pull to refresh

Comments 98

эээм… opera 11.64 Win XP. Копирую пример — не работает =)
Дык нет еще одного плагина. курсорс.чего-то там.
Смотрите в демо, на гите.

Кстати сделать бы опшн для замены не-цифр (при вводе телефона/карты с пробелами-черточками полезно)
Не уверен насчет версии 11, но в 12 сделал.
Да, да, Вилен, вот так это делается. Куча тестов, тщательный подбор событий, пробы, ошибки, правки… Годы работы. А не «а не зафигарить ли нам такую фичу!?».
Example -> выделить -> Ctrl + V в поле с первым инпутом, (неотпуская crtl с прошлого раза) CTRL + Z
Если в первый импут вставить и попытаться нажать CTRL + A (я так всегда делаю, чтоб выделить и заменить) — то перескакиваем на второй импут, ещё до нажатия на A

Как то по мне не удобненько
Второй пункт с CTRL+A срабатывает, если курсором ткнуть в конец текста в инпуте.
А в «Credit Card Example» такой баг не наблюдается.
Прошу прощения, наблюдается, но при специфических условиях, см. выше.
+Delete не работает между инпутами. Chrome 20 (омг, еще недавно был 10!), Linux x86.
У меня в хроме и фаерфоксе, если находиться в конце инпута и нажать просто на Ctrl, то перескакивает на следующий инпут. Думаю, это не сложно исправить :-)
Не только Ctrl, любая клавиша перебрасывает (лично у меня). Shift, Alt, Arrow Down, etc.
Спасибо, буду исправлять.
Спасибо, удобная вещь. Не планируется ли возможность перезаписи существующих значений полей? Пример: заполнили все поля двойками, потом стрелками переместились в первое поле, и зажали тройку. Сейчас просто ничего не произойдет, а было бы здорово иметь возможность заменять текущее значение новым.
Я не планирую. Ниже есть обсуждение плагинов, из которых Masked Input точно умеет делать такое поведение, но для одного инпута.
Я сначала подумал что это так и нужно, предположив что jqyery обрабатывает такие инпуты.
Чем не люблю такие поля — никогда не знаешь примет ли оно все значение целиком или придется копировать каждую часть по-отдельности.
Я привык в таких случаях сначала копировать значение целиком, получилось — отлично, сэкономил время; не получилось, ну и ладненько — первое поле заполнилось, остальные придётся по частям.
>> Как сделать группу инпутов удобными
Отказаться от группы инпутов и сделать один-единственный инпут. Номер карты позволить вводить через дефисы, через пробелы или слитно, код в номере телефона — в скобках, через дефис или через пробел.
Как вариант (можно в ненормальное программирование)
1 импут, наверстать на нём маленькие дивы вертикальными разделителями, и яваскриптом сделать вставку пробелов через каждые 4 символа.
В jquery кстати есть плагин для ввода по маске, он сам разбивает текст по заданному шаблону, вставляет недостающие символы, вырезает лишние и вообще довольно умный + корректно работает с историей ввода реализованной как самим браузером так и сторонними плагинами того же jquery
UFO just landed and posted this here
сейчас ниже столько плагинов накидают :)
Надо только подождать, всё интересное в комментах, как всегда.
Да вот коммент написал а сам пошел вспоминать проект где использовал и искать)

jquery.maskedinput звать

Выбирал из нескольких, понравился этот. Самое в нем приятное, что служебные символы в маске, которые задаешь сам — например для номера (926) 234-2455 служебными могут быть (___) ___-____
Эти символы как будто живут «вне» инпута и их нельзя удалить, перенести или вообще как-либо испортить, они всегда будут стоять на своих местах. При этом они нормально копируются вместе с текстом и не мегают вставке и вводу (курсор через них «перепрыгивает»)
Почти хороший, кроме того что при фокусе выделяет весь инпут, и в iOS курсор не очень правильно работает.
Выделение инпута при фокусе вполне стандартное поведение, не вижу проблемы в этом?
Это естественно для строки адресной строки браузера, или для поисковой строки. Для полей ввода естественно поставить курсор в место куда кликнули.
Хмм пожалуй да, согласен. Думаю такое поведение можно «вылечить»
В опере вставка не работает
Вы что, судя по последним тенденциям большинство веб разработчиков вообще оперу за браузер не считают.
<Дядя Миша> У тебя какая-то неправильная Опера, называется Хром. Правильная Опера — это Мозилла.
И слава богу, может тогда ее доля вместе ие упадет
Монополия Хрома — это тоже не очень-то хорошо.
Исправил, проверял в 12ой, спасибо.
А кто-то всё это вводит вручную? Проще сохранить в текстовый файлик или keepass, да копипастить…
> Hacker
> сохранить в текстовый файлик
facepalm.jpg
Так он же hacker, вот и советует так, чтобы потом проще ломать было.
UFO just landed and posted this here
Неоднократно нарывался на неприятный момент в таких разделенных инпутах (особенно при установке Windows старых версий), когда глядя то в бумажку, то на клавиатуру пропускаешь один символ или вставляешь лишний. В вашем плагине при удалении символа в середине, правая часть не подтягивается влево. И добавить в середину тоже невозможно.
Есть прекрасный плагин inputmask, который как раз позволяет в пределах одного инпута делать любые разделители. Это гораздо удобнее, чем возиться с энным количеством инпутов (не говоря уже о том, что на сервере это потом в одно значение надо собирать).
Это же стартап, там дух делать свои изобретения ещё не угас.
А за плагин плюсик, он действительно делает свою работу.
С моего пулл-реквеста там, кстати, русские символы в буквосодержащих масках работают :)
Так что активно используется в работе.
Мало того собирать на стороне сервера, это потом еще (когда человек захочет, например, отредактировать номер телефона) — обратно надо разбирать все на инпуты.
Мне всё-таки кажется, при попытке вставить срок годности карты со случайно захваченным пробелом спереди его стоит вычистить.
Более того стоит вообще игнорировать все символы кроме цифр, зачем они нам.
После вставки через ctrl+v, если решишь перезаписать номер вручную, то не стирается предыдущее значение за курсором. Т.е. по моему у таких контролов должен быть что-то вроде replace mode, т.к. сейчас складывается ощущение что вообще readonly пока не выделишь и не удалишь. (chromium + ubuntu x64) последние версии.
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 вы сделали на английском, если б делали для одной страны ладно уже можно было и без "+".

Плюс действительно нужен. Я немного не однозначно написал.
Картинка примерно иллюстрирует как поле ввода выглядело давно. Сейчас оно выглядит по другому и там есть знак плюса.
А что насчет телефонов то в итоге? Сделали какое-нибудь решение?
Приведенное решение по очевидным причинам не подходит:

«Код страны», для русскоговорящей аудитории — +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)
Для телефонов не подходит.
Мы остановились на select для кода города и input для продолжения.
UFO just landed and posted this here
Некоторые люди, когда у них спрашивают номер телефона — вводят свой городской номер и не парятся.
А ты гадай, из какого он города (или вообще — страны, если сайт ориентирован на СНГ)

Поля «код страны» и «код города» служат напоминанием, что надо указать эти сведения.

Masked Input и иже с ними — не панацея:
Во-первых, если человеку предлагается ввести номер телефона, а поле ввода выглядит примерно так:
+_ (___) ___-__-__
это вводит его в небольшой ступор — причины объяснил выше:
1. У старшего поколение сам такой внешний вид поля может вызвать недопонимание
2. У пользователей из Украины и Беларуси код страны это 3 цифры а не одна. Если человек хочет указать бесплатный номер (8-800) указывать его в формате +7 800 не совсем верно.
3. У пользователей из региональных городов в коде города может быть 4-5 цифр, а сам номер телефона — соответственно 6-5 цифр
4. Если сайт ориентирован на корпоративных пользователей (которым как раз удобнее указывать городские номера) — им также удобно в поле «номер телефона» указывать сразу в скобках добавочный. Либо для добавочного делать отдельное поле.
UFO just landed and posted this here
Код страны/города можно подставлять, например.
Как по мне, так такого плана поля крайне неудобны.
Почему не сделать 1 поле и уже на сервере разбивать значение как душе угодно? На клиенте по желанию, можно по событию (теряет фокус, достигает определенного кол-ва символов, таймаут) привести к нужному формату (добавить + к номеру телефона, разбить на группы и т.д.).
UFO just landed and posted this here
UFO just landed and posted this here
по IP определите его город

у нас например офис находится в Казани, но при этом все городские телефоны московские.

не возникает подозрения, что в 7 введенных символах не уместить код города и телефон
возникает, потому что в номере телефона должно быть 10 цифр + код страны.

Понятно, что можно сделать, например, всплывающую подсказку «не забудьте указать код города» если человек ввел меньше 10 цифр.

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

И для этого поля «код города» — «номер телефона», как мне кажется, прекрасно выполняют свою функцию.
И для этого поля «код города» — «номер телефона», как мне кажется, прекрасно выполняют свою функцию.

А мобильный номер как вводить? Там «кода города», формально нет.

А чем вам не нравиться вариант с примером норма в самой форме (ну или рядом). Когда видишь в каком формате от тебя ждут номер — очень сложно ошибиться.
норма в виде
"+_ (___) ___-__-__"?

Я уже два раза ответил на этот вопрос — тем, что количество цифр в коде страны, города и номере телефона разное в разных городах и странах

Там «кода города»

Как показывает практика, пользователи в таком случае либо первые три цифры номера мобильного указывают как «код города» либо заполняют только поля «код страны» — "+7" и оставшуюся часть (912-345-67-89) вводят как «номер телефона», пропуская «код города».

Заметьте, я нигде не уточнял, что «код города» — это обязательное поле. Оно нужно для напоминания (мол не забудьте указать код города), но если его не заполнить, при этом заполнив поле «номер телефона» — валидатор не должен выдавать ошибки.

Обязательное поле «номер телефона». «Код города» и «код страны» — поля-напоминалки.
Я одного не понимаю — зачем просить пользователя разделить код страны, код города и собственно сам номер.

Все равно использовать(т.е. звонить, руками или автоматизировано) нужно только «полный» номер.

«Код города» и «код страны» — поля-напоминалки.

Так и не увидел, чем вам не нравиться когда в форме присутвуют напоминалки-напоминалки — т.е. или пример в самом поле, либо пример рядом с полем. Оно же проще и компактнее.
На андроиде вставляется только в первый инпут. Или андроид не поддерживается?
Opera 12.00 — копипаста номера не работает. вставляется только в первый инпут
В какой-то момент забыл об опере, и не протестировал. Исправил.
Автору спасибо, было бы не плохо ещё реализовать такую фичу:
при заполненных полях и вставке текста из буфера, скажем со второго символа (или первого), последующие символы заменялись новыми данными
В любом инпуте, кропе последнего, нажатие на End или Ctrl+→ перебрасывает каретку на следующий.
Тоже самое при нажатии кнопки Home: хочу попасть в начало инпута, а перескакивает на следующий.
Ох, здорово.
У меня руки не дошли вставку из буфера сделать, но такую же задачку решал.
Добавил еще работу Home/End.
Демка | GiHub
Теперь не работает выделение по Shift+[Home|End]. :)
Ник автора показался знакомым, так и оказалось, раньше соотрудничали на фрилансе.
В другой статье из одного административного района человек.
Как узок мир.

А насчет планина, что сказать, не идеален, но весьма добротно реализован.
А нельзя просто отслеживать все события по нажатию кнопок и производить действия с контролами через js (обрубая дефолтную функциональность)?
Предложенное Вами решение мне видится штабелем заплаток, которое не факт, что не стрельнет где-то в каком-то браузере.
А ваше чем не заплатка.
В любом случае костыль получается. Всех вариантов не предусмотреть.
Сейчас так и поступают в редакторах кода. И я думал что бы сделать так. Но передумал по двум причинам:
1) Скорость мигания курсора не возможно взять из настроек ОС. Его все эмулируют.
2) Придется верстать инпуты, они не могут быть системными.
Отлично, спасибо!
И сразу бага: когда курсор находится в конце одного из заполненных инпутов, если при этом нажать Shift, курсор перемещается в следующий инпут. Нелогично это потому, что я нажимаю шифт, чтобы перескочить в предыдущий инпут при помощи Shift+Tab.
Да, исправил. Спасибо.
Казалось бы такая тривиальная задача, но далеко не всем хватает времени/желания ее реализовать в своих проектах. Спасибо большое.
Понасуют кривых скриптов на сайты, а потом сиди и мучайся: то вставка не работает, то выделение, то хрен знает как это заполнять с мобильника.
Вместо использования атрибута class для логики, лучше используйте data-* атрибуты. Оставьте class для представления.
Ну, в истории веб дева много чего «принято». Таблицами верстать, 1х1-пиксельными гифами забивать… Плевать на кросс-браузерность и стандарты с высокой колокольни… Но это не значит, что так нужно делать всегда.

То, что оно на синтетическом тесте в два раза медленнее я не спорю, но дело не в этом. Я более чем уверен, что data-* селекторы в будущем соптимизируют. А вот себя соптимизировать и писать по стандарту можно уже сейчас…
UFO just landed and posted this here
Можешь насладиться демонстрацией во время бронирования отеля :)
Does not work in iOS

К сожалению. В iOS нельзя сделать переместить фокус из одного ипута в другой.
Чего-то с кодировкой:

asyncTest("paste symbols : [|◊] to [|◊]", function() {
Под маком отображаются) Заменил небезопасные символы. Спасибо.
Есть большой минус: если я заполнил первый инпут и нажал таб (стандартное поведение), то фокус автоматически переходит на 3-й инпут.
Советую почитать, как с этим боролся Сергей Чикуёнок: chikuyonok.ru/2010/07/simple-things/
Один инпут всегда лучше нескольких. Лучше — когда данные, введённые в один инпут автоматически проверяются при вводе и при необходимости — разбиваются на группы, видимые пользователю.
Sign up to leave a comment.