我试图做我的功课,但如果我有一个区域,JS是不是 - 我没有关键字做任何适当的搜索。我所知道的是它可能涉及掩蔽/覆盖。输入格式文本
我想要一个输入元素与客户端代码在用户输入的文本中查找模式。如果他们输入与其他文本内嵌的电话号码模式,我希望该模式对于初学者来说是风格化的。
最终,我想弄清楚如何通过AJAX做一些有用的事情。
PS。不是重复的how to format textbox entry client side
我试图做我的功课,但如果我有一个区域,JS是不是 - 我没有关键字做任何适当的搜索。我所知道的是它可能涉及掩蔽/覆盖。输入格式文本
我想要一个输入元素与客户端代码在用户输入的文本中查找模式。如果他们输入与其他文本内嵌的电话号码模式,我希望该模式对于初学者来说是风格化的。
最终,我想弄清楚如何通过AJAX做一些有用的事情。
PS。不是重复的how to format textbox entry client side
您需要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()(比如在我的小提琴中),它更干净,并且被认为是更好的练习。
你应该看看一个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);
我相信你要找的是“content editable div”。 –
这是令人困惑的,你能扩展你的意思吗?问题是我在想你想要一个像Syntax Highlight这样的东西?对于不熟悉JS的人来说,这会非常复杂,你让我觉得因为你说你需要1个输入元素和各种样式?如果你只是想将文本添加到“逻辑风格”,如破折号到电话号码那么这是不同的。 – Griphox