可编辑div的使用,实现类似textarea功能
来源:互联网 发布:linux 创建用户脚本 编辑:程序博客网 时间:2024/05/16 05:45
简介
最近在做项目中遇到一个有意思的功能:在一个文本域中不仅可以输入正常的汉字和英文,还可以在光标处插入一些自定义的内容,如:“《java编程思想》”,那么这本书的书名和书名号作为一个整体插入到光标处,要删除也是一起删除不可以单独删除几个字,很显然用传统的textarea是不可能实现的,这里解决的办法是用可编辑的div代替textarea。
具体实现
- 在jsp页面上添加div标签,自定义宽高、背景填充为白色(就是为了做的像textarea),一定要注意在div标签内添加属性contenteditable=”true”,这个属性意思是该div为可编辑div。
- 此时div中可以输入正常的文本内容,接下来书写js代码实现插入自定义内容。
function insertBook(bookMessage){ var tc = document.getElementById("bookTextarea"); tc.focus(); if(typeof document.selection != "undefined"){ var range = document.selection.createRange(); range.pasteHTML("<div class='data' englishName="+bookMessage[0].englishName+" contentEditable='false' id="+bookMessage[0].id+">《"+bookMessage[0].name+"》</div>"); } else if(window.getSelection()!=undefined){ var range = window.getSelection().getRangeAt(0); range.collapse(false); var node = range.createContextualFragment("<div class='data' contentEditable='false' id="+bookMessage[0].id+">《"+bookMessage[0].name+"》</div"); var c = node.lastChild; range.insertNode(node); if(c){ range.setEndAfter(c); range.setStartAfter(c) } var j = window.getSelection(); j.removeAllRanges(); j.addRange(range); }}
- 该js方法insertBook就是将书的信息作为整体放在可编辑div中的,可以看到代码中兼容了ie(document.selection)和火狐(window.getSelection())。
- bookTextarea为可编辑div的id,传入的参数bookMessage为书信息的json串。
- ie下document.selection.createRange()方法为获取光标位置。
- range.pasteHTML()方法为将内容以html的形式解析到页面。
- 火狐同理只是写法不同。
重点
- 整个js代码的关键在于将书的信息放在一个不可编辑的div中,即
<div class='data' contentEditable='false' id="+bookMessage[0].id+">《"+bookMessage[0].name+"》</div>
注意一定要添加属性contentEditable=’false’,不然它会跟随父div变成一个可编辑的div,那时就不能作为一个整体删除了。
2.然后将1中的div以html标签的形式解析到页面上,不然会把整个标签看作是文本解析到页面上的,ie的做法是用range.pasteHTML()方法解析1中的div到页面,火狐自己看代码吧。
注意事项
1.正常在可编辑的div中输入的字是黑色的,可以将解析到页面的div内容换个颜色用于区分。
2.ie和火狐删除的方式略有不同,ie下按退格键即Backspace就可删除插入的自定义内容,而火狐需要用鼠标整体选取插入的自定义内容然后按退格键才可以删除。
阅读全文
0 0
- 可编辑div的使用,实现类似textarea功能
- 使用Repeater实现类似GridView编辑功能
- C# DataGridView中实现类似ComboBox可编辑的下拉框功能
- C# DataGridView中实现类似ComboBox可编辑的下拉框功能
- div 仿 功能健全的textArea,实现监听
- jquery 实现可编辑DIV
- jquery 实现可编辑div
- 双击div变成可编辑区的简单实现
- DropDownList下拉框可编辑功能的简单实现
- DropDownList下拉框可编辑功能的实现
- textarea支持图形编辑的实现方法
- 前端js实现粘贴图片到可编辑的div(其他标签也可)中
- 用Javascript实现类似ComboBox的可编辑下拉列表框.
- IOS 实现类似桌面删除应用程序的效果(长按 可编辑 删除 图片按比例截取)
- 实现顶点可编辑功能,发图
- MFC列表框实现可编辑功能
- Select实现可编辑和下拉功能
- 用一个div模拟textarea的实现
- HTMl5内置存储sessionStorage和localStorage
- Android关于Service服务
- Python list之append和extend的区别
- 日本咖啡馆推出AR体验,在三次元邂逅初音未来
- flume之Taildir Source支持变化追加文件的日志收集
- 可编辑div的使用,实现类似textarea功能
- android 6.0和7.0开发中应该注意的问题
- A + B Problem II
- PCIe学习笔记(22)--- 中断(3)---MSI-X
- solidworks镜像特征
- Linux下安装jdk步骤详述
- 只是喜欢而已,请不要记得我
- 解决 ImportError: No module named 'serial' 问题
- lsyncd实时同步搭建指南——取代rsync+inotify