zoukankan      html  css  js  c++  java
  • 一个简单易懂的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{
    		 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>
    

      

  • 相关阅读:
    Linux学习之路3-HelloWorld
    Linux学习之路2-linux系统烧写
    Linux学习之路1
    linux常用命令总结
    禅道配置发邮件功能
    SHELVE模块
    PICKLE模块
    JSON_dump和load
    json.dumps和loads方法
    模块调用
  • 原文地址:https://www.cnblogs.com/chenshuo/p/4580457.html
Copyright © 2011-2022 走看看