JS实现即时替换输入文本

悬赏园豆：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>');
        }
}

Javascript Web前端网站开发

Link_King_Jay | 初学一级 | 园豆：167
提问于：2012-12-26 23:58

< >

所有回答(5)

-1

web受到游览器的影响

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

在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 | 园豆：3440 (老鸟四级) | 2012-12-27 10:49

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

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

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

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

有在Web QQ试过了，不行。

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

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

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

请使用document.execcommand insertImage

ie使用pasteHTML

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

henry_li | 园豆：214 (菜鸟二级) | 2014-04-09 17:32

清除回答草稿

您需要登录以后才能回答，未注册用户请先注册。

欢迎，请先 登录 或者 注册 。

JS实现即时替换输入文本

欢迎，请先登录或者注册。