我正在我的网站上开发一个contentEditable区域,用户可以在其中键入消息.
- <div contentEditable="true" class="smartText">User types here...</div>
事情是,我们将内置智能文本,这意味着如果用户在此div内部输入@usersame,如果用户名存在,则@username应以蓝色突出显示,如果不存在则为绿色.当然,所有这一切都应该发生在用户键入…
我不知道从哪里开始,现在我有这个：
- $("body").on("keyup",".smartText",function(){
- var $this = $(this),value = $this.html(),regex = /[^>]#\S+[^ ]/gim;
- value = value.replace(regex,"<span style='color:red'>$&</span>");
- $this.html(value);
- });
但文字不断跳跃(以及插入位置),并不觉得正确的方向.我想这是一个有点类似于JSFiddle的颜色代码,因为它找到它.
我基本上想要和Twitter一样的东西.
这是一个JSFiddle玩的：http://jsfiddle.net/denislexic/bhu9N/4/
在此先感谢您的帮助.
解决方法
我喜欢这个问题,我很努力地解决.我相信我终于成功了(有一点帮助).
= UPDATED =
代码：
- [...]
- // formatText
- formatText: function (el) {
- var savedSel = helper.saveSelection(el);
- el.innerHTML = el.innerHTML.replace(/<span[\s\S]*?>([\s\S]*?)<\/span>/g,"$1");
- el.innerHTML = el.innerHTML.replace(/(@[^\s<\.]+)/g,helper.highlight);
- // Restore the original selection
- helper.restoreSelection(el,savedSel);
- }
- [...]
- // point
- keyup: function(e){
- // format if key is valid
- if(helper.keyIsAvailable(e)){
- helper.formatText($this[0]);
- }
- // delete blank html elements
- if(helper.keyIsDelete && $this.text()=="") {
- $this.html("");
- }
- }
截图：
JSFiddle这里：http://jsfiddle.net/hayatbiralem/9Z3Rg/11/
需要外部资源：
> http://dl.dropboxusercontent.com/u/14243582/jscalc/js/rangy-core.js
> http://dl.dropboxusercontent.com/u/14243582/jscalc/js/rangy-selectionsaverestore.js
助手问题(谢谢)：replace innerHTML in contenteditable div
正则表达式测试工具(谢谢)：http://www.pagecolumn.com/tool/regtest.htm
