一个简单易懂的javascrip selection&range小案例
在制作富文本编辑器，尤其是在制作以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小案例的更多相关文章
- Servlet----------用servlet写一个“网站访问量统计“的小案例
package cn.example; import java.io.IOException; import java.io.PrintWriter; import javax.servlet.Ser ...
- Vue 自定义一个插件的用法、小案例及在项目中的应用
1.开发插件 install有两个参数,第一个是Vue构造器,第二个参数是一个可选的选项对象 MyPlugin.install = function (Vue, options) { // 1 ...
- ES6基础与解构赋值（高颜值弹框小案例！）
let只作用在当前块级作用域内使用let或者const声明的变量,不能再被重新声明let不存在`变量提升` console.log(dad); var dad = '我是爸爸!';//预定义undef ...
- (24/24) webpack小案例--自己动手用webpack构建一个React的开发环境
通过前面的学习,对webpack有了更深的认识,故此节我们就利用前面相关知识自己动手用webpack构建一个React的开发环境,就算是一个小案例吧. 注:此处使用的开发工具是Webstorm. 1. ...
- 一个ssm综合小案例-商品订单管理----写在前面
学习了这么久,一直都是零零散散的,没有把知识串联起来综合运用一番 比如拦截器,全局异常处理,json 交互,RESTful 等,这些常见技术必须要掌握 接下来呢,我就打算通过这么一个综合案例把这段时间 ...
- Python:通过一个小案例深入理解IO多路复用
通过一个小案例深入理解IO多路复用 假如我们现在有这样一个普通的需求,写一个简单的爬虫来爬取校花网的主页 import requests import time start = time.time() ...
- 一个简单的Maven小案例
Maven是一个很好的软件项目管理工具,有了Maven我们不用再费劲的去官网上下载Jar包. Maven的官网地址:http://maven.apache.org/download.cgi 要建立一个 ...
- 机械表小案例之transform的应用
这个小案例主要是对transform的应用. 时钟的3个表针分别是3个png图片,通过setInterval来让图片转动.时,分,秒的转动角度分别是30,6,6度. 首先,通过new Date函数获取 ...
- [转载]再谈百度：KPI、无人机，以及一个必须给父母看的案例
[转载]再谈百度:KPI.无人机,以及一个必须给父母看的案例 发表于 2016-03-15 | 0 Comments | 阅读次数 33 原文: 再谈百度:KPI.无人机,以及一个必须 ...
随机推荐
- CentOS6.6 搭建Zabbix_3.0
公司有下发内网监控服务器的需求 使用zabbix监控 所以这篇文章是讲述的zabbix的搭建 其实网上很多地方都有 可以参考 环境安装 系统环境: # cat /etc/redhat-release ...
- BigDecimal加减乘除运算
java.math.BigDecimal.BigDecimal一共有4个够造方法,让我先来看看其中的两种用法: 第一种:BigDecimal(double val)Translates a doubl ...
- 3个同一行div的摆放div
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- Hibernate 系列教程4-单向多对一
项目图片 hibernate.cfg.xml <mapping resource="com/jege/hibernate/one/way/manytoone/User.hbm.xml& ...
- VS2013使用技巧汇总
1. Peek View 在不新建TAB的情况下快速查看.编辑一个函数的代码. 以前要看一个函数的实现,需要在使用的地方点击F12跳转到该函数,实际上这是很浪费时间的.VS2013Peek View便 ...
- Struts中的数据处理的三种方式
Struts中的数据处理的三种方式: public class DataAction extends ActionSupport{ @Override public String execute() ...
- Notes over compiling..
When compiling VIM on windows, using nmake may be a better choice.. Because so far my attempts to co ...
- debian 安装 android studio 环境
jdk环境变量配置: ~/.hashrc export JAVA_HOME=/usr/share/jdk1.8.0_92 export PATH=$JAVA_HOME/bin:$PATH export ...
- [转]解决LinearLayout中控件不能居右对齐
在LinearLayout布局时使用右对齐(android:layout_gravity="right")控件对齐方式不生效,需要设置 android:layout_weight= ...
- shell写多行到文件中
用cat或者echo命令输入多行数据到指定文本 #!/bin/sh ( cat <<EOF start() { echo "start" } EOF ) > Ma ...