场景:

<div id='content' contenteditable='true' >
hello
</div> <button id='caret'>设置光标位置</button>

需求:点击按钮,把插入符放到文本‘hello’的后面或前面,像这样

//后面
hello| //前面
|hello

并兼容主流浏览器

解决:

function placeCaret(el, atStart) {
el.focus(); if (typeof window.getSelection != 'undefined' && typeof document.createRange != 'undefined') { var range = document.createRange();
range.selectNodeContents(el);
range.collapse(atStart); var sel = window.getSelection();
sel.removeAllRanges();
sel.addRange(range);
} else if (typeof document.body.createTextRange != 'undefined') { var textRange = document.body.createTextRange();
textRange.moveToElementText(el);
textRange.collapse(atStart);
textRange.select();
}
} // true 为开始位置,false 为末尾
placeCaret( document.getElementById('content'), false );

参考:http://stackoverflow.com/questions/4233265/contenteditable-set-caret-at-the-end-of-the-text-cross-browser?lq=1

H5之contenteditable的更多相关文章

  1. Chrome浏览器任意修改网页内容

    在Chrome浏览器按F12,打开开发者工具,切换到console选项卡: 在下面的输入行输入下面的命令回车: document.body.contentEditable="true&quo ...

  2. HTML学习第六天

    HTML学习第六天 一.全局属性 contentEditable属性,控制标签元素的可修改性,默认与“”(空字符串)都代表真,即可编辑 <!DOCTYPE html> <html l ...

  3. H5新增属性contenteditable(不用JS,实现div模拟textarea高度自增长)

    无意中看到一篇博客介绍了contenteditable这个属性——不需用JS,只需在div里加上contenteditable="true",即可实现div模拟textrarea( ...

  4. H5新属性 contenteditable

    contenteditable 属性规定元素内容是否可编辑 <div contenteditable style="width: 100px;height:100px"> ...

  5. H5全局属性contenteditable,实现可编辑元素

    <div contenteditable="true">这是一段可编辑的段落.请试着编辑该文本.</div> 效果如下:

  6. H5系列之contenteditable

    其实这个属性很简单,既然把它放到一个单独的文章来说,他肯定有一些注意点要讲 兼容性很好,兼容所有主流浏览器. 用法很简单,只需要给你需要的标签填上即可. <div contenteditable ...

  7. H5嵌入原生开发小结----兼容安卓与ios的填坑之路

    一开始听说开发H5,以为就是做适配现代浏览器的移动网页,心想不用管IE了,欧也.到今天,发现当初too young too simple,兼容IE和兼容安卓与IOS,后者让你更抓狂.接下来数一下踩过的 ...

  8. H5 APP开发必读,20个你不知道的Html5新特征和窍门

    Jeffrey Way曾发表过一篇博文<28 HTML5 Features, Tips, and Techniques you Must Know >讲述了28个HTML5特征.窍门和技术 ...

  9. H5复制粘贴

    H5 复制粘贴 - execCommand 字数748 阅读399 评论0 喜欢0 需求:自动复制一段内容到剪切板, 让用户可以在其他客户端粘贴(发小广告做推广经常要用吧) window.clipbo ...

随机推荐

  1. WIX

    1. Create msi File http://www.cnblogs.com/lienhua34/archive/2012/10/07/2714367.html 2. information a ...

  2. Service服务

    Android多线程: 定义线程的2种方式: 1.继承Thread类,重写run()方法,new一个实例,用start()方法启动:new MyThread().start(); 2.实现Runnab ...

  3. 前台JS(type=‘file’)读取本地文件的内容,兼容各种浏览器

    [自己测了下,能兼容各种浏览器,但是读取中文会出现乱码.自己的解决方法是用notepad++把txt文件编码改为utf-8(应该是和浏览器编码保持一致吧?..)] 原文  http://blog.cs ...

  4. CSS 选择器

    1.  .   ==> class选择器 2.  #  ==> id选择器 3.  *  ==>选择所有元素 4.<p>  ==>选择所有<p>标签的元 ...

  5. test lab ~ triangle test by using junit and coverage

    first set up a new folder as your test class place, and then let your package in test class folder b ...

  6. Unity3D之随心所欲的获取对象

    ps 1 建立一个cube 建立一个scripts 2  scripts 赋给cube 3  在script里面直接  gameObject.SetActive (false); 就是操作当前脚本绑定 ...

  7. ASP.NET MVC Jquery Validate 表单验证的多种方式

    在我们日常开发过程中,前端的表单验证很重要,如果这块处理不当,会出现很多bug .但是如果处理的好,不仅bug会很少,用户体验也会得到很大的提升.在开发过程中我们可以不借助 JS 库,自己去手写 JS ...

  8. iOS - Localizable 国际化

    1.国际化 开发的移动应用更希望获取更多用户,走向世界,这就需要应用国际化,国际化其实就是多语言,系统会根据当前设备的语言环境来识别 App 中使用中文还是英文. 2.应用内容国际化 1.新建一个名为 ...

  9. GitHUb 代码提交遇到的问题以及解决办法

    git 添加代码出现以下错误: fatal: Unable to create 'F:/wamp/www/ThinkPhpStudy/.git/index.lock': File exists. If ...

  10. oracle 存储过程创建及执行简单实例

    1. 创建 CREATE OR REPLACE PROCEDURE getAplage(eNo IN NUMBER,salary OUT NUMBER) AS BEGIN SELECT AplAge ...