contenteditable兼容问题
2024-10-07 01:17:02
正常情况下用contenteditable,IE下有兼容性问题需要将个别字母变成大写的contentEditable。
获取contenteditable的内容 对html进行处理 兼容 chrome、IE、Firefox
var html = $(this).html();
if(html){
var lineSign = html.indexOf('<div>');
if(html.indexOf('<p>') > -1){
lineSign = html.indexOf('<p>');
}
if(lineSign !== 0){
if(lineSign > 0){
html = html.slice(0,lineSign);
}
$(this).prepend($('<div></div>',{html:html}));
}
data.opt.val = [];
var h = '',brs = [];
$(this).children('div,p').each(function(i,n){
h = n.innerHTML;
brs = h.split('<br>');
if(brs.length > 0){
$.each(brs,function(j,m){
data.opt.val.push(m.replaceAll(' ','\t'));
});
}else{
data.opt.val.push(m.replaceAll(' ','\t'));
}
});
}
1. 与contenteditable属性无关的CSS控制法
只有webkit内核浏览器才支持
read-write-plaintext-only一个div元素，要让其可编辑，也就是可读写，contenteditable属性是最常用方法，做前端的基本上都知道。但是，知道CSS中有属性可以让普通元素可读写的的同学怕是就少多了。
主角亮相：user-modify.
支持属性值如下：
user-modify: read-only;
user-modify: read-write;
user-modify: write-only;
user-modify: read-write-plaintext-only;
其中，write-only不用在意，当下这个年代，基本上没有浏览器支持，以后估计也不会有。read-only表示只读，就是普通元素的默认状态啦。
然后，
read-write和read-write-plaintext-only会让元素表现得像个文本域一样，可以focus以及输入内容两者的区别就在于，一个可以输入富文本，而下面一个只能输入纯文本
read-write-plaintext-only {
- -webkit-user-modify: read-write-plaintext-only;}
test {
height: 100px;
padding: 5px;
border: 1px solid #a0b3d6;
overflow: auto;}
<p class="test read-write-plaintext-only"></p>
2. 使用标准contenteditable属性值的HTML控制法
目前仅仅是Chrome浏览器支持比较好的。
contenteditable=""
contenteditable="events"
contenteditable="caret"
contenteditable="plaintext-only"
contenteditable="true"
contenteditable="false"
最新文章
- 验证码识别--type5
- HDU 4054
- noip2009提高组题解
- 1509: [NOI2003]逃学的小孩 - BZOJ
- Java设计模式之策略模式（一）
- cloudstack安装篇1-linux命令修改IP信息
- Post/Redirect/Get pattern | PRG 模式
- 测试中的代码分享~将可以合并的方法去合并Func不赖
- Cordova探险系列（三）
- Memcached缓存
- C# 图解教程 第二章 C#编程概述
- NOIP2014-5-10模拟赛
- linxu安装SNMP
- linux配置jdk环境变量
- HDU-6060 RXD and dividing
- 自动化测试基础篇--Selenium弹出框alert
- PhpStorm 头部注释、类注释和函数注释的设置
- nio再学习之通道channel
- Linux：ldd命令详解
- BugPhobia进阶篇章：功能规格说明书