javascript - 输入时格式化文本

Question

我试着做我的功课，但如果我有一个区域，JS 不是它——我没有关键字来做任何正确的搜索。我所知道的是它可能涉及掩蔽/覆盖。

我想要一个带有客户端代码的输入元素，在用户输入的文本中寻找模式，因为他们输入它。如果他们输入与其他文本内联的电话号码模式，我希望该模式能够，对于初学者来说，得到样式。

最终，我想弄清楚如何通过 AJAX 用它做一些有用的事情。

PS。不是如何格式化文本框输入客户端的副本

Answer 1

你需要三件事，一个按键事件来读取输入，一个正则表达式来检查模式是否匹配，以及改变输入样式的方法。

$('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
});

或测试这个小提琴。最后要感谢詹姆斯，如果没有他，这一切都不会发生。查看他关于电话模式和正则表达式的精彩帖子，我无耻地复制了所有内容^^。

请注意，如果您想在文本（而不是输入框）中突出显示诸如“sometext phoneNumber somemoretext”之类的内容，请查看此帖子以及其他 james wunderpost 的总体评论

注意：我更喜欢 .addClass() 和 .removeClass() 方法而不是 .css() 方法（就像我的小提琴一样），它更干净，被认为是一种更好的做法。

Answer 2

您应该查看 javascript 富文本编辑器或至少类似的样式来进行样式设置。这是一个在纯文本区域中侦听电话号码模式的快速而肮脏的示例：

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

  if (matched) alert(matched);
}

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