2011-11-04 77 views
0

我试图做我的功课,但如果我有一个区域,JS是不是 - 我没有关键字做任何适当的搜索。我所知道的是它可能涉及掩蔽/覆盖。输入格式文本

我想要一个输入元素与客户端代码在用户输入的文本中查找模式。如果他们输入与其他文本内嵌的电话号码模式,我希望该模式对于初学者来说是风格化的。

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

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

+0

我相信你要找的是“content editable div”。 –

+0

这是令人困惑的,你能扩展你的意思吗?问题是我在想你想要一个像Syntax Highlight这样的东西?对于不熟悉JS的人来说,这会非常复杂,你让我觉得因为你说你需要1个输入元素和各种样式?如果你只是想将文本添加到“逻辑风格”,如破折号到电话号码那么这是不同的。 – Griphox

回答

0

您需要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 
}); 

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()(比如在我的小提琴中),它更干净,并且被认为是更好的练习。

+0

这取决于电话号码的模式。上述模式似乎假设一个国家代码前缀后跟一个特定于少数国家的模式。它不会匹配我的地区的电话号码。 – RobG

+0

确定它是一个例子!有些谷歌我相信你可以偶然发现国家甚至国际的通用模式 – roselan

0

你应该看看一个JavaScript富文本编辑器或至少像this样式。这里是一个简单的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);