Вам надо ввести телефонный номер в поле "Номер". Как его вводить? 8(111)222-22-22? 8-111-2222222? 81112222222? Короче, черт ногу сломит. Питер Энт создал компонент, который лишает нас всяких сомнений насчет того, как заполнять поля с длинными номерами, а также предлагает некоторые приятные моменты, типа капитализации первых букв в полях с именем/фамилией, автоперехода к следующему полю.
Компонент перехватывает нажатия клавиш и сравнивает их с заданным шаблоном. В шаблонах используется # для цифровых значений, C - для букв, которые будут капитализованы, c - для букв, которые будут автоматически переведены в нижный регистр и A (или a) для любого символа. Итак, шаблон телефонного номера можно задать так: "(###) ###-####", а имя человека - "Ccccccccccc".
Некоторые проблемы возникают при обработке нажатия Backspace, Space, Delete, Home, End и стрелок Влево и Вправо. Например, если вы введете (999) 555-____ , а затем перейдете курсором на позицию перед первой цифрой 5 и вставите цифру 6, то последняя заменит эту пятерку и получится (999) 655-____ , а курсор теперь встанет после этой шестерки.
Новый виджет имеет следующие атрибуты:
inputMask: шаблон маски, например ###-##-####.
blankChar: Символ визуального отображения шаблона в поле формы. Например, для поля телефонного номера будет (___) ___-____ , так как символ по умолчанию blankChar это _.
defaultChar: Этот символ заменяет blankChar при извлечении текста из виджета с помощью атрибута actualText. Например, если вы хотите, чтобы все # стали 0, задайте defaultChar = 0. Этот символ также используется при нажатии пробела.
text: Атрибут виджета TextInput переопределен для облегчения задания/получения значения поля. Например, если у есть шаблон ввода телефонного номера, вы можете задать text="9995551212" и символы будут разделены в соответствии с заданым шаблоном и будут отражены как "(999) 555-1212". При получении значения text, остаются только числа без шаблонов и символов blankChar.
Появилось новое событие:
inputMaskEnd: Событие наступает при вводе последнего символа шаблона. Вы можете использовать его для автоматического перехода на следующее поле.
2 комментария:
Проблемы с контролем ввода при нажатиях клавиш со стрелками, бэкспейса и и т.п. -- часто встречаются в таких случаях. Я столкнутлся с ними при созданиии собственного компонента-текстового поля, который бы позволял пользователю вводить только заданное слово (это делалось для обучалки, та что там это имело смысл). И отляживать такие баги тяжеловато. Тут уже прихождится балансировать между главной функцией компонента - облегчить ввод большинству пользователей и вторичной -- обеспечить абсолютно безопасный ввод всем, включая тех, кто захочет потом что-то отредактировать ))
Глюк с заменой пятерки на шестерку мне показался удобнее вставки.
Отправить комментарий