1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
// 在元素的指定位置设置输入光标 (注:目前只支持开始位置和结束位置)
function __setCaret(element, pos)
{
    try
    {
        element.focus();
    }
    catch(e)
    {
    }
 
    var len = __innerText(element).length;
     
    // pos小于0或大于文本长度,则设置光标在输入区域末尾
    pos = pos < 0 ? len : pos > len ? len : pos;
     
    if (document.selection) // ie
    {
        var rang = document.body.createTextRange();
        rang.moveToElementText(element);
        rang.collapse(pos == 0);
        rang.select();
    }
    else if (window.getSelection)   // ff
    {
        var sel = window.getSelection();
        var range = document.createRange();
        range.selectNodeContents(element);
        range.collapse(pos == 0);
        sel.removeAllRanges();
        sel.addRange(range);
    }
}

可编辑div的createRange()的更多相关文章

  1. 可编辑div中包含子元素时获取光标位置不准确的问题

    前言: 高亮显示输入框中的关键字符,这就必须得用到可编辑div(或其他标签)元素了,这时我们需要获取光标的位置,以便插入字符. 正文: 正常情况下获取光标位置,代码如下: function getPo ...

  2. 2017-02-20 可编辑div中如何在光标位置添加内容

    之前做了一个可编辑div需要在里面插入内容,搜了好多代码,就这个能实现我的功能,记录一下,以备以后用 <!DOCTYPE HTML> <html> <head> & ...

  3. 可编辑DIV与移动端软键盘兼容性问题汇总

    此文复现的所有兼容性问题均为以下情况: 1. 腾讯X5内核 2. 全屏webview 问题如下: 1. IOS12 中软键盘弹出导致页面顶部截断,并且无法恢复. 解决方法:添加交互事件,调用本地方法, ...

  4. js 指定位置插入html标签(可编辑div)

    demo效果如下: html代码部分如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" &q ...

  5. 可编辑DIV (contenteditable="true") 在鼠标光标处插入图片或者文字

    近期需开发一个DIV做的编辑器,插入表情图片可直接预览效果,仔细参考了下百度贴吧的过滤粘贴过来文件的THML代码,自己整理了下.写出来只是和大家分享下,我自己也不大懂,经过努力,幸好搞定. 蛋疼的事情 ...

  6. 限制可编辑div只能输入纯文本

    本博客转载自张鑫旭大神的一篇文章:小tip: 如何让contenteditable元素只能输入纯文本,原文地址:http://www.zhangxinxu.com/wordpress/2016/01/ ...

  7. 可编辑DIV 光标位置 处理

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

  8. 鼠标光标聚焦到可编辑div的最末尾

    <p> <div id='text' contenteditable=true style='width:100px;height:100px;border:1px #ccc;'&g ...

  9. 在可编辑div的光标下插入html

    function pasteHtmlAtCaret(html, selectPastedContent) {//参数1为要插入的html //参数2为boolean 是否选中插入的html 默认为fa ...

随机推荐

  1. Easy Game LightOJ - 1031

    Easy Game LightOJ - 1031 upd:似乎有复杂度更优越的做法,见http://www.cnblogs.com/hehe54321/p/8431020.html 题意:A和B玩一个 ...

  2. php一致性hash性能测试(flexihash/memcache/memcached)

    一致性hash的使用在PHP中有三种选择分别是原生的memcache扩展,memcached扩展,还有一个是网上比较流行的flexihash类. 最近有项目需要使用flexihash类操作memcac ...

  3. 动手实现 Redux(一):优雅地修改共享状态

    从这节起我们开始学习 Redux,一种新型的前端“架构模式”.经常和 React.js 一并提出,你要用 React.js 基本都要伴随着 Redux 和 React.js 结合的库 React-re ...

  4. gulp插件之gulp-mock-server

    本文讲gulp-mock-server的应用,用于虚拟一个服务器,模拟后台返回json数据给前端,这样可以一定程度上实现前后端分离,约定好接口之后,前后端即可同时开发,从而提高效率. 在gulpfil ...

  5. 洛谷P2763 试题库问题(最大流)

    题意 $n$道试题,每道题有多种类别属性 抽取$m$道题组成试卷,要求包含指定的类型 输出方案 Sol 又是一道zz网络流 我的构图长这样,$k_i$表示第$i$道试题需要的数量 #include&l ...

  6. JVM内存区域参数配置

    转自:https://www.jianshu.com/p/5946c0a414b5 需要提前了解的知识点: JVM内存模型 JVM垃圾回收算法 下图是JVM内存区域划分的逻辑图   JVM内存区域逻辑 ...

  7. java操作Excel、PDF文件

    java操作Excel.PDF文件 分享者:Vashon 分享来源:CSDN博客 下面这些是在开发中用到的一些东西,有的代码贴的不是完整的,只是贴出了关于操作EXCEL的代码: jxl是一个*国人写的 ...

  8. Idea导入tomcat源码

    1.下载资源 下载主要包含两个包,已经编译的包和源码包,如图所示. 链接地址为: http://mirror.bit.edu.cn/apache/tomcat/tomcat-7/v7.0.93/bin ...

  9. 如何处理Docker的错误消息request canceled:Docker代理问题

    在本地安装Kubernetes时,遇到错误消息: request canceled while waiting for connection(Client.Timeout exceeded while ...

  10. 如何使用SAP CRM Marketing Survey创建一个市场问卷调查

    使用事务码CRM_SURVEY_SUITE进行编辑.选中Activities这个应用类型,点击新建按钮: 双击Survey的根节点,点击编辑按钮维护Suvey的标题: Survey的正文布局类型(La ...