首页新闻找找看学习计划

JS实现即时替换输入文本

0
悬赏园豆:10 [待解决问题]

在用Web QQ的时候,发现一个不习惯的地方,那就是不能像桌面版那样用快捷键输入表情,比如/kb可以打出,而在Web QQ只能用鼠标去点。于是打开一个WebQQ聊天窗口,看到输入框是用一个带有contenteditable="true"的div,于是写了个DEMO。第一次输入这个/kb的时候可以替换,但是替换之后光标就会一直跳到最前,导致我输入的时候只能从头输入,为什么会这样呢?有什么解决办法吗?

这是代码
<div class="rich_editor_div" style="display: block; " contenteditable="true"></div>
<script type="text/javascript">
var divs = document.getElementsByTagName('div');
for(var i=0;i<divs.length;i++)
{
    if(divs[i].getAttribute('class')=='rich_editor_div')
        divs[i].onkeyup = function(){
            this.innerHTML=this.innerHTML.replace(/\/kb/,'<img mark=[face41] src=http://0.web.qstatic.com/webqqpic/style/face/41.gif class=system>');
        }
}

 

Link_King_Jay的主页 Link_King_Jay | 初学一级 | 园豆:167
提问于:2012-12-26 23:58
< >
分享
所有回答(5)
-1

web受到游览器的影响

chenping2008 | 园豆:9836 (大侠五级) | 2012-12-27 07:27
0

this.innerHTML=this.innerHTML.replace之前让他获得焦点this.focus();就行了

for(var i=0;i<divs.length;i++)
{
   
if(divs[i].getAttribute('class')=='rich_editor_div')
        divs[i].onkeyup
= function(){

     this.focus();
           
this.innerHTML=this.innerHTML.replace(/\/kb/,'<img mark=[face41] src=http://0.web.qstatic.com/webqqpic/style/face/41.gif class="system">');
        }
}

Rich.T | 园豆:3438 (老鸟四级) | 2012-12-27 10:49

试过了,不行。是获得焦点了,但是光标是在最前,而不是在所有的字符后面。

支持(0) 反对(0) Link_King_Jay | 园豆:167 (初学一级) | 2012-12-27 12:37
1

把 onkeyup 换成 onblur 可以避免这种现象,虽然这样不会即时显示图片,但是在提交的信息的时候会自动把/kb换成图片。

飘渺逸风 | 园豆:232 (菜鸟二级) | 2012-12-27 10:50

有在Web QQ试过了,不行。

支持(0) 反对(0) Link_King_Jay | 园豆:167 (初学一级) | 2012-12-27 12:39
0

我说一下chrome的情况吧,你把文本节点之中的一段文字替换成了一个img节点,而chrome对可编辑区域的光标判定是根据range的,你替换过后,之前的range所在的节点和偏移量就不存在了,所以不知道要将光标放在哪,就放到了可编辑区域的最开始位置。range的操作有点复杂,光标的定位要靠getSelection()方法得到的对象,具体怎么操作你得自己学习一下。ie下面的情况是靠selection对象和textRange对象。你要想定位到所有文字最后还是比较容易的,要想定位到当前输入的这个地方就复杂了。

collapsar | 园豆:260 (菜鸟二级) | 2013-09-10 17:42
0

请使用document.execcommand    insertImage 

ie使用pasteHTML

 

具体搜索下 range操作,富文本编辑等等

henry_li | 园豆:214 (菜鸟二级) | 2014-04-09 17:32
清除回答草稿
   您需要登录以后才能回答,未注册用户请先注册