zoukankan      html  css  js  c++  java
  • 可编辑DIV 光标位置 处理

    //场景: 要做一个网页即时通信,发送信息的文本编辑框  要求能发图片和表情,那么textarea就不能满足需求了,因为textarea内没有办法加入image

    // 采用方案是使用可编辑的DIV(也就是 一般 DIV的 contenteditable 属性为 true)

    // 但是发现添加表情或者插入图片之后,光标不会随着移动到末尾 图片和表情 采用的 append方式 添加的html结构


    采用以下方法可以在输入图片和表情之后 使光标出现在最后 IE11 和 chrome浏览器 完全没问题


    obj 传入的是 需要append图片的 DOM对象 ,text 传入的是 图片html结构
    function inimage(obj,text){ var range, node; if(!obj.hasfocus) { obj.focus(); } if (window.getSelection && window.getSelection().getRangeAt) { range = window.getSelection().getRangeAt(0); range.collapse(false); node = range.createContextualFragment(text); var c = node.lastChild; range.insertNode(node); if(c){ range.setEndAfter(c); range.setStartAfter(c) } var j = window.getSelection(); j.removeAllRanges(); j.addRange(range); } else if (document.selection && document.selection.createRange) { document.selection.createRange().pasteHTML(text); } }
  • 相关阅读:
    机会的三种境界
    常用“快”捷键
    心路历程
    中兴笔试及答案
    浅谈oracle中row_number() over()分析函数用法
    IE的F12开发人员工具不显示问题
    1002.A + B Problem II --大数问题
    6470.count --快速矩阵幂
    4151.电影--贪心
    3070.斐波拉契数列--快速幂
  • 原文地址:https://www.cnblogs.com/maxm/p/7295553.html
Copyright © 2011-2022 走看看