当前位置：文江博客话题详情

输入时设置文本格式

发布于 2024-12-13 14:36:56 字数 309 浏览 4 评论 0原文

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

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

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

附言。不重复如何格式化文本框输入客户端

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

夏见 2024-12-20 14:36:56

您应该研究 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);

You should look into a javascript rich text editor or at least something like this for styling. Here is a quick and dirty example of listening for a phone number pattern in a plain textarea:

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

  if (matched) alert(matched);
}

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

回复收藏 0 原文

凉城 2024-12-20 14:36:56

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

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

或测试这个小提琴。最后要感谢詹姆斯，没有他这一切都是不可能的。查看他关于电话模式和正则表达式的精彩帖子，我无耻地从中复制了所有内容 ^^< /a>.

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

注意：我更喜欢 .addClass() 和 .removeClass() 方法而不是 .css() 方法（喜欢在我的小提琴中），它更干净，并且被认为是更好的实践。

you need 3 things, an event on keypress to read the input, a regular expression to check if the pattern is matched, and method to change the style of the input.

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

or test this fiddle. Finally big ups to James, without who all this wouldn't have been possible. check his great post about phone patterns and regexp from which I shamelessly copied everything ^^.

note if you want to highlight something like "sometext phoneNumber somemoretext" in a text (and not input box), check this post, and overall comments, of this other james wunderpost

note: I prefer .addClass() and .removeClass() methods to the .css() one (like in my fiddle), it's cleaner, and considered a better practice.

回复收藏 0 原文

~没有更多了~