Форматировать текст при вводе

Question

Я пытался сделать свою домашнюю работу, но если у меня есть область, JS не так - у меня нет ключевых слов, чтобы выполнить какой-либо правильный поиск. Все, что я знаю, это то, что это может включать маскировку / наложение.

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

В конечном счете, я хотел бы выяснить, как сделать что-то полезное с помощью AJAX.

PS. Не дубликат как отформатировать текстовое поле на стороне клиента

Answer 1

Вы должны заглянуть в javascript rich text editor или хотя бы что-то вроде this для стилизации. Вот быстрый и грязный пример прослушивания шаблона телефонного номера в простой текстовой области:

function interpretKeys(e) { 
  var text = e.target.value,
      matched = text.match(/(\d|-){7,15}/g);

  if (matched) alert(matched);
}

textPlace.addEventListener('keypress', interpretKeys, false);

Answer 2

вам нужно 3 вещи, событие при нажатии клавиши для чтения ввода, регулярное выражение для проверки соответствия шаблона и метод изменения стиля ввода.

$('div').delegate('input.phonenr', 'keyup', function () {
    var phonePattern = /^((00|\+)[0-9]{2})[0-9]\d{9}$/;
    var phoneNumber = this.value.replace(/\s|\-/g,'');
    if ( phonePattern.test(phoneNumber) ) $(this).css('color', 'green');
    else $(this).css('color', 'red');
    // test with 0041 798 12 21 123
});

или проверить эту скрипку .Наконец большие успехи Джеймсу, без которого все это было бы невозможно. посмотрите его замечательный пост о шаблонах телефона и регулярном выражении, из которого я беззастенчиво скопировал все.текст (а не поле ввода), проверьте этот пост и общие комментарии этого другого james wunderpost

примечание: я предпочитаю методы .addClass () и .removeClass ().css () один (как в моей скрипке), он чище и считается лучшей практикой.