Форматирование текста, поступающего в текстовое поле для номера телефона и т. Д.

Question

Не могу найти это нигде, возможно я ищу неправильные глаголы.

Я пытаюсь получить текстовое поле, требующее определенного формата при вводе числа.Для простоты, давайте использовать пример номера телефона.Когда я набираю текст в поле, мне нужно несколько советов, которые помогут пользователю ввести правильный формат телефонного номера:

(4__) ___-____

(403) 3__-____

(403) 329-98__

(403) 329-9824

Это позволит пользователям забыть код города и т. Д. Я видел, как это было сделано.в другом месте, но не знаю, с чего начать.

Я уверен, что это javascript, но он предназначен для приложения ruby ​​on rails, так что если вы знаете о плагине или чем-то еще.

Спасибо!

Джош

Answer 1

Я думаю, что вы ищете маскированный ввод jQuery плагин

Answer 2

Почему бы просто не создать три текстовых ввода и использовать javascript для перемещения фокуса между ними по мере их заполнения?

Например, см. this jsfiddle . Он использует быструю функцию vanilla-JS для перехода между входами:

function advance_phone(event, next_element)
{
   var evt = event ? event : window.event; // Older versions of IE don't pass along an event object
   var target = evt.target || evt.srcElement; // Get the target of the event

   if (target.value.length == target.maxLength)
   {
     document.getElementById(next_element).focus();
   }
}

Вы берете это дальше и улучшаете его, чтобы позволить перемещаться назад между полями при нажатии клавиши Backspace, и добавляете обработчик нажатия клавиш, чтобы ограничить разрешенные клавиши цифрами. Или вы можете даже стилизовать входы так, чтобы он был похож на телефонное поле .

Answer 3

+ 1 к предложению Амита.

Однако, поскольку вы используете Rails, вы можете захотеть что-то зависящее от Prototype вместо jQuery.Проверьте это http://www.xaprb.com/blog/2006/11/02/how-to-create-input-masks-in-html/