在制作富文本编辑器，尤其是在制作以div元素为编辑器区域时，当鼠标离开编辑区域以后会失去焦点，失去选区，这时候就要通过selection&range来重新设置选区。【以下代码尚未考虑IE低版本，请在现代浏览器下测试学习】

<!DOCTYPE html>

<html lang="en">

<head>

	<meta charset="UTF-8">

	<title>range</title>

	<style type="text/css">

	#edit{

		width: 100%;

		height: 300px;

		border: 1px solid #ccc;

	}

	</style>

</head>

<body>

	<div contenteditable="true" id="edit">

		<p>通过一个富文本编辑器，学习JavaScript！</p>

	</div>

	<div id="button">button</div>

	<script type="text/javascript">

	var edit = document.getElementById('edit');

	var button = document.getElementById('button');

	edit.addEventListener('mouseup', function() {

		saveSelection();

	});

	button.addEventListener('click', function() {

		restoreSelection();

		document.execCommand('underline', false, null);

		saveSelection();

	});

	function saveSelection() {

		selection = document.getSelection();

		save = selection.getRangeAt(0);

	}

	function restoreSelection() {

		var selection = window.getSelection();

		if(selection.rangeCount > 0) {

			selection.removeAllRanges();

		}

		var range = document.createRange();

		selection.addRange(save);

	}

	</script>

</body>

</html>

　　

一个简单易懂的javascrip selection&range小案例的更多相关文章

  1. Servlet----------用servlet写一个“网站访问量统计“的小案例

    package cn.example; import java.io.IOException; import java.io.PrintWriter; import javax.servlet.Ser ...

  2. Vue 自定义一个插件的用法、小案例及在项目中的应用

    1.开发插件 install有两个参数,第一个是Vue构造器,第二个参数是一个可选的选项对象   MyPlugin.install = function (Vue, options) {   // 1 ...

  3. ES6基础与解构赋值（高颜值弹框小案例！）

    let只作用在当前块级作用域内使用let或者const声明的变量,不能再被重新声明let不存在`变量提升` console.log(dad); var dad = '我是爸爸!';//预定义undef ...

  4. (24/24) webpack小案例--自己动手用webpack构建一个React的开发环境

    通过前面的学习,对webpack有了更深的认识,故此节我们就利用前面相关知识自己动手用webpack构建一个React的开发环境,就算是一个小案例吧. 注:此处使用的开发工具是Webstorm. 1. ...

  5. 一个ssm综合小案例-商品订单管理----写在前面

    学习了这么久,一直都是零零散散的,没有把知识串联起来综合运用一番 比如拦截器,全局异常处理,json 交互,RESTful 等,这些常见技术必须要掌握 接下来呢,我就打算通过这么一个综合案例把这段时间 ...

  6. Python:通过一个小案例深入理解IO多路复用

    通过一个小案例深入理解IO多路复用 假如我们现在有这样一个普通的需求,写一个简单的爬虫来爬取校花网的主页 import requests import time start = time.time() ...

  7. 一个简单的Maven小案例

    Maven是一个很好的软件项目管理工具,有了Maven我们不用再费劲的去官网上下载Jar包. Maven的官网地址:http://maven.apache.org/download.cgi 要建立一个 ...

  8. 机械表小案例之transform的应用

    这个小案例主要是对transform的应用. 时钟的3个表针分别是3个png图片,通过setInterval来让图片转动.时,分,秒的转动角度分别是30,6,6度. 首先,通过new Date函数获取 ...

  9. [转载]再谈百度：KPI、无人机，以及一个必须给父母看的案例

    [转载]再谈百度:KPI.无人机,以及一个必须给父母看的案例 发表于 2016-03-15   |   0 Comments   |   阅读次数 33 原文: 再谈百度:KPI.无人机,以及一个必须 ...

随机推荐

  1. 使用WMware新建linux虚拟机

    使用WMware安装linux虚拟机的时候很多人搞不清楚使用什么适配器. 平时也看到很多误人子弟的观点,这里用事实说话. VMWare提供了三种工作模式,它们是bridged(桥接模式).NAT(网络 ...

  2. nginx 正则表达式

    1.nginx配置基础 1.正则表达式匹配 ~ 区分大小写匹配 ~* 不区分大小写匹配 !~和!~*分别为区分大小写不匹配及不区分大小写不匹配 ^ 以什么开头的匹配 $ 以什么结尾的匹配 转义字符.可 ...

  3. HUST - 1599 Multiple

    input 长度不大于3*10e5的数字串 output 不含前导0的能整除64的字串的个数(0算一个,064不算) 一般数组中找能整除一个数的字串都是用取余来做的 用一个a[64]来存下从1-i位累 ...

  4. php取随机数 explode劫取字符串 时间定义随机数

    php取随机数 <?phpfunction randomkeys($length){ $pattern='1234567890'; for($i=0;$i<$length;$i++) {  ...

  5. 128M小内存VPS优化与typecho环境搭建

    在使用Haphost提供的128M内存的VPS建站时,debian7+wordpress+nginx+mysql跑起来相当吃力.然后使用Debian7+typecho+lighttpd+sqlite的 ...

  6. ajax2016/4/15 post与get

    post方式,数据放在send()里面作为参数传递 xhr.setRequestHeader('content-type', 'application/x-www-form-urlencoded'); ...

  7. fpSpread1 简单用法

    //如果汇总的话直接可在模板里面填写公式,不过要有三行空行才行 比如SUM(A1,A2,A3) fpSpread1.Sheets[0].RowCount = 30; fpSpread1.Sheets[ ...

  8. cocos2d3.8.1 使用prebuild提升发布android速度

    1.生成cocos prebuild库 cocos gen-libs -m debug或 cocos gen-libs -m release 2.使用命令创建test项目 cocos new test ...

  9. 用phpstudy搭建dedecms网站验证码出不来解决方案

    验证码图片不显示,这应该是很多站长朋友们最长遇到的一个问题,本地测试明明好好的,为什么传上空间或者服务器上验证码就无法显示了呢,春哥分析这可能是由于没有加载gd库扩展所引起的,那么怎么解决呢?由于引起 ...

  10. CentOS服务端口开放

    #例如开放81端口iptables -I INPUT -i eth0 -p tcp --dport 81 -j ACCEPTiptables -I OUTPUT -o eth0 -p tcp --sp ...