可编辑div将光标定位到最后

最近做了一个可以回复留言的页面,主要包括:@、表情功能,一开始使用的是文本域textarea,最后发现这样无法显示表情,后来改成可编辑div,在div中添加contenteditable="true",则该div即可编辑。

<div contenteditable="true"></div>

在选择表情或者选择@某人后,会经常遇到选择后可编辑div中的光标不见了,或者显示的位置不对,于是在网上找了些方法,现在总结下:

function set_focus()
{
    el=document.getElementById(‘guestbook_editor‘);
    //el=el[0];  //jquery 对象转dom对象
    el.focus();
    if($.support.msie)
    {
        var range = document.selection.createRange();
        this.last = range;
        range.moveToElementText(el);
        range.select();
        document.selection.empty(); //取消选中
    }
    else
    {
        var range = document.createRange();
        range.selectNodeContents(el);
        range.collapse(false);
        var sel = window.getSelection();
        sel.removeAllRanges();
        sel.addRange(range);
    }
}

调用此方法,可以将光标放在可编辑div的最后。

参考地址:http://chwjbn.blog.163.com/blog/static/1038799201310762620681/

时间: 2024-08-29 14:43:45

可编辑div将光标定位到最后的相关文章

div contenteditable 重新编辑时focus光标定位到前面问题解决

<div class="editdiv" id="edit" contenteditable="true">这是添加文字</div> getC($('.editdiv')) function getC(el){ el = el[0]; // jquery 对象转dom对象 el.focus(); var range = document.createRange(); range.selectNodeContents(el)

可编辑div 获取光标位置及插入内容

<!DOCTYPE html> <html> <title>Div 光标位置 插入 文字 或 HTML</title> <script language="javascript" type="text/javascript"> var range; function getPos() { range = window.getSelection().getRangeAt(0);//找到焦点位置 var spa

js-处理div设置的编辑框处理焦点定位追加内容

具体实现方法如下: 首先要让DIV启用编辑模式 <div contenteditable=true id="divTest"></div> 通过设定contenteditable=true开启div的编辑模式.这样DIV就可以跟文本框一样输入内容了.不扯话题了.下面说怎么获取或设置光标位置. 2个步骤: ① 获取DIV中的光标位置② 改变光标位置 var cursor = 0; // 光标位置 document.onselectionchange = funct

可编辑DIV (contenteditable=&quot;true&quot;) 在鼠标光标处插入图片或者文字

近期需开发一个DIV做的编辑器,插入表情图片可直接预览效果,仔细参考了下百度贴吧的过滤粘贴过来文件的THML代码,自己整理了下.写出来只是和大家分享下,我自己也不大懂,经过努力,幸好搞定. 蛋疼的事情出来了,当编辑框失去焦点时候,再插入图片时候总是插入在最前面(谷歌和火狐,IE没问题).还没搞定,,, <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/

可编辑div光标位置

参考: https://developer.mozilla.org/en-US/docs/Web/API/Window/getSelection https://developer.mozilla.org/en-US/docs/Web/API/Selection/getRangeAt https://developer.mozilla.org/en-US/docs/Web/API/Selection/addRange MDN上提示这些API不稳定.应该是兼容IE9+,谷歌,火狐 1. var s

input、textarea、div(contenteditable=true)光标定位到最后

1.针对input.textarea //定位input.textarea function po_Last(obj) { obj.focus();//解决ff不获取焦点无法定位问题 if (window.getSelection) {//ie11 10 9 ff safari var max_Len=obj.value.length;//text字符数 obj.setSelectionRange(max_Len, max_Len); } else if (document.selection)

模拟可编辑div输入域同时输入文字表情

近期遇到了模拟可编辑div输入域同时输入文字表情的需求,本来还觉得很好做,但是在具体实施的过程中遇到了一点问题. 第一个比较简单的问题是表情和对应字符的映射关系,这部分比较好做,没有用富文本框也没有用编辑器,做了表情和相应字符的对应关系只有就可以实现这个需求. 第二个问题在解决过程中就比较棘手了,因为是自己模拟输入域,所以对于在文字中加入表情后光标的定位及后续的输入是有要求的,就是得符合正常的输入习惯.这个问题的核心就是对于node节点的操作和光标对象的熟悉程度及其内部属性和方法的使用.对于前端

Vim光标定位

*定位到指定行n: 输入"nG". 或输入"ngg". 或输入":n" 这里,n就是指定的行的行号.注意,有时候G=gg. *跳到屏幕顶部: 输入“H”. 这里,停在第一个非空字符上.加一个数字N,是指距窗口顶部的行数(如'NH'正数第N行) *跳到屏幕底部: 输入“L”. 这里,停在第一个非空字符上.加一个数字,是指距窗口底部的行数(如'NL'倒数第N行) *跳到屏幕中间: 输入“M”. 这里,停在第一个非空字符上. *跳到文件首: 输入&qu

在混合开发中软键盘引起的布局问题、input与可编辑DIV兼容性问题汇总

此文复现的所有兼容性问题均为以下情况: 1. 腾讯X5内核 2. 全屏webview 问题如下: 1. IOS12 中软键盘弹出导致页面顶部截断,并且无法恢复. 解决方法:添加交互事件,调用本地方法,在键盘收起后执行页面回滚操作. bridgeClass.jsEventHook.keyboardWillShow = function () { // 添加flag 是因为 有多个空时,切换输入框也会调用WillHide switchFlag = true; }; bridgeClass.jsEve