输入时格式化文本答案

【问题标题】：Format Text upon Entry输入时格式化文本
【发布时间】：2011-11-04 00:48:31
【问题描述】：

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

我想要一个带有客户端代码的输入元素，在用户输入的文本中查找模式。如果他们输入与其他文本内联的电话号码模式，我希望该模式首先具有样式。

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

PS。不是how to format textbox entry client side的重复项

【问题讨论】：

我相信您正在寻找的是“内容可编辑的 div”。
这令人困惑，你能扩展你的意思吗：获得风格？问题是我在想你想要语法高亮之类的东西吗？对于不熟悉 JS 的人来说，这将是非常复杂的，你让我觉得是因为你说你想要 1 个输入元素和各种样式？如果您只想将文本添加到“逻辑样式”，例如电话号码的破折号，那就不同了。

标签： javascript jquery maskedtextbox

【解决方案1】：

您应该使用 javascript 富文本编辑器或至少像 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);

【讨论】：

【解决方案2】：

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

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

或test this fiddle。最后要感谢詹姆斯，没有他，这一切都不可能发生。 check his great post about phone patterns and regexp from which I shamelessly copied everything ^^.

请注意，如果您想在文本（而不是输入框）中突出显示“sometext phoneNumber somemoretext”之类的内容，check this post, and overall comments, of this other james wunderpost

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

【讨论】：

这取决于电话号码的模式。上述模式似乎假设一个国家代码前缀后跟一个可能特定于少数国家的模式。它与我所在地区的电话号码不匹配。
确定这是一个例子！使用一些 googlefu，我相信您可以偶然发现适用于国家甚至国际的通用模式