本文出自张旭鑫博客,要知详情,请戳右侧地址:http://www.zhangxinxu.com/wordpress/?p=5120

一、温故而知新

很多年以前,稍等,让我搜一下contenteditable(右上角),哈,是2010年的时候,写了篇文章“div模拟textarea文本域轻松实现高度自适应”,就是说的contenteditable的应用。

虽然说,利用全浏览器都支持的contenteditable模拟文本域可以实现体验相当不错的高度跟随内容自动撑开的效果,但是呢,有个很大的问题就是HTML内容可以直接被粘贴进去,如下图所示:

之前的文章提到过过滤HTML的方法,保证内容都是纯文本。然而,这种方法的问题在于:

  1. 粘贴完毕到过滤结束有时间差,用户很看到内容一闪而过的糟糕体验;
  2. 光标的位置会发生变化,不是之前focus的位置了;

当年的我图样图森破,所以,只有上面这种程度。实际上,控制contenteditable元素只能输入纯文本是有体验比较好的方法的。

二、与contenteditable属性无关的CSS控制法

一个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-writeread-write-plaintext-only会让元素表现得像个文本域一样,可以focus以及输入内容。

您可以狠狠地点击这里:CSS user-modify属性行为表现demo

会发现,设置了read-writeread-write-plaintext-only值的两个<p>标签元素是可以被focus的:

而这两者的区别就在于,一个可以输入富文本,而下面一个只能输入纯文本,例如,我们从某网页同时复制一段内容粘贴进去看看:

好了,至此,本文标题的答案实际上就已经有了。也就是给元素设置:

user-modify: read-write-plaintext-only

就可以让元素既可以编辑,也只能输入纯文本,表现得就跟textarea文本域一样。

是不是很酷啊!然而,抱歉地跟大家讲下,目前只有webkit内核浏览器才支持read-write-plaintext-only这个值,因此,我们的使用其实是:

-webkit-user-modify: read-write-plaintext-only

我们可以在移动端使用,以及,只需要兼顾webkit内容的桌面网页项目。

三、使用标准contenteditable属性值的HTML控制法

咳咳,提问:在HTML中,contenteditable支持的属性值是?

图样图森破时候的我,脑中就只有contenteditable="true"contenteditable="false",科科,后来我发现自己太天真了,新的草案中明确表示还有多个其他属性值:

The contenteditable attribute is an enumerated attribute whose keywords are the empty string (“”), “events”, “caret”, “typing”, “plaintext-only”, “true”, and “false”. There is one additional state, the inherit state, which is the missing value default (and the invalid value default).

垂直展示下就是(不包括默认的inherit继承):

contenteditable=""
contenteditable="events"
contenteditable="caret"
contenteditable="plaintext-only"
contenteditable="true"
contenteditable="false"

别问我,我也不知道"events""caret"是干什么用的,嘿,但是"plaintext-only"我是知道的,可以让编辑区域只能键入纯文本

<div contenteditable="plaintext-only"></div>
 

如果您发现,居然出乎意料,可以弄进去富文本,那说明你使用的是非Chrome之流的浏览器。

换句话说,contenteditable="plaintext-only"和CSS只的-webkit-user-modify: read-write-plaintext-only一样,目前仅仅是Chrome浏览器支持比较好的。

所以,您的项目如果还有很多IE8浏览器的用户,我只能替你惋惜,美妙的东西无法立即用上,不得已,寻求下面的方法。

四、控制粘贴paste事件的JS控制法

如果我们单纯地敲击键盘,输入的内容实际上都是纯文本。除了一些特殊情况,例如IE浏览器下的编辑框会自动把合乎条件的url地址自动加上链接。富文本污染的情况主要出现在复制粘贴的时候,于是,如果我们能在粘贴的时候,对剪切板中的内容进行HTML过滤,再手动插入内容,岂不就可以完美解决无法输入富文本的问题了吗!?

于是,鄙人不才,一番折腾,弄出了下面的代码:

$('[contenteditable]').each(function() {
// 干掉IE http之类地址自动加链接
try {
document.execCommand("AutoUrlDetect", false, false);
} catch (e) {} $(this).on('paste', function(e) {
e.preventDefault();
var text = null; if(window.clipboardData && clipboardData.setData) {
// IE
text = window.clipboardData.getData('text');
} else {
text = (e.originalEvent || e).clipboardData.getData('text/plain') || prompt('在这里输入文本');
}
if (document.body.createTextRange) {
if (document.selection) {
textRange = document.selection.createRange();
} else if (window.getSelection) {
sel = window.getSelection();
var range = sel.getRangeAt(0); // 创建临时元素,使得TextRange可以移动到正确的位置
var tempEl = document.createElement("span");
tempEl.innerHTML = "&#FEFF;";
range.deleteContents();
range.insertNode(tempEl);
textRange = document.body.createTextRange();
textRange.moveToElementText(tempEl);
tempEl.parentNode.removeChild(tempEl);
}
textRange.text = text;
textRange.collapse(false);
textRange.select();
} else {
// Chrome之类浏览器
document.execCommand("insertText", false, text);
}
});
});

兴趣使然,目前还没再真实项目中实践过,因此,可能还有瑕疵或者缺陷。自己在demo上,IE8+,Chrome等浏览器都测试过,都是可以的。对了,demo要先放出来。

您可以狠狠地点击这里:contenteditable元素纯文本输入控制demo

demo页面有个框框,大家可以试试看,是不是只能弄进去纯文本。

关于代码的一些说明

  • 一开始的$('[contenteditable]').each()只是示意,,里面的核心代码与jQuery没有任何关系,大家可以灵活介入自己项目。
  • IE浏览器的contenteditable框有个问题,会自动添加链接,我们需要的是纯文本,显然这种自以为是的行为不是我们要的,可以使用document.execCommand("AutoUrlDetect", false, false)来进行处理。
  • 理想情况应该直接使用document.execCommand("insertText")命令插入内容。但是,但是,IE浏览器虽然运行这段代码没有出错,也是支持document.execCommand的,但是,却没有插入内容的表现。也不知道是不是我打开的方式不对,后来,我就寻求更传统的方法,创建文本选区与插入,正好,就IE支持document.body.createTextRange
  • document.selectionIE浏览器一直是支持的,直到IE11浏览器,直接废弃了,好在window.getSelection还活着,于是,又一次分情况处理。
  • 获得剪切板数据,不同浏览器情况也不一样,这里不赘述了,因为已经1点多了,年纪大了,实在熬不住了……
  • 兼容性甩CSS方法和HTML方法两条街,我自己使用的浏览器都测过没问题,当然,demo比较简单,测试可能不能说明全部问题。

本文为原创文章,会经常更新知识点以及修正一些错误,因此转载请保留原出处,方便溯源,避免陈旧错误知识的误导,同时有更好的阅读体验。
本文地址:http://www.zhangxinxu.com/wordpress/?p=5120

如何让contenteditable元素只能输入纯文本的更多相关文章

  1. 小tip: 如何让contenteditable元素只能输入纯文本

    div模拟textarea文本域轻松实现高度自适应 这篇文章发布于 2010年12月23日,星期四,22:07,归类于 css相关. 阅读 112630 次, 今日 40 次 by zhangxinx ...

  2. DIV仿textarea文本域,contenteditable如何只能输入纯文本

    对于支持HTML5浏览器有2种方法: 1. HTML5 <div contenteditable="plaintext-only"></div> 2.  C ...

  3. 限制可编辑div只能输入纯文本

    本博客转载自张鑫旭大神的一篇文章:小tip: 如何让contenteditable元素只能输入纯文本,原文地址:http://www.zhangxinxu.com/wordpress/2016/01/ ...

  4. EditText添加了ImageSpan后,在两者中间不能输入纯文本

    严格来说是连续插入两个ImageSpan之后,在其中间不能够输入纯文本内容. 最后发现问题出现在了SpannableString在设置ImageSpan的时候第四个参数flag的问题. spannab ...

  5. 在HTML中限制input 输入框只能输入纯数字

    限制 input 输入框只能输入纯数字 onkeyup = "value=value.replace(/[^\d]/g,'')" 使用 onkeyup 事件,有 bug ,那就是在 ...

  6. [No0000168]Excle只允许用户输入纯文本,禁止用户修改单元格样式、格式等

    背景:自己的模板给别人,让他填完信息上传到系统里,但别人经常不按模板的格式来填写,导致无法程序自动化.能不能在模板上把格式锁住,只允许输入纯文本,但不能改格式? 方法: 步骤一,创建你要的模板 其中, ...

  7. contenteditable 插入及粘贴纯文本内容

    本文主要介绍 div 标签设置  contenteditable = ' true ' 时,在光标位置插入输入的内容,或在光标位置粘贴纯文本内容.文中涉及知识,可参考以下: http://www.zh ...

  8. EditText设置输入的类型,只能输入纯数字,只能输入手机号码,只能输入邮箱等等。

    作者:程序员小冰,CSDN博客:http://blog.csdn.net/qq_21376985转载请说明出处. 下面以数字.电话为例讲述EditText怎么设置输入类型,其他类型可以参考InputT ...

  9. input 输入框只能输入纯数字

    1.onkeyup = "value=value.replace(/[^\d]/g,'')" 使用 onkeyup 事件,有 bug ,那就是在中文输入法状态下,输入汉字之后直接回 ...

随机推荐

  1. Linux部分常用命令详解(一)

    echo 命令详解 格式: echo string 显示普通字符: echo "it is a test" 或者 echo it is a test 显示转义字符: echo &q ...

  2. vps被封逃逸_v2+cloudflare+websocket+tls+nginx

    每逢重大节日,总有那么一大部分vps凉凉,以下为能正经正常使用vps,无奈之举,此法由于多层代理,夜间速度会有影响,白天感受不明显. 由于博客园内容审查,v2_ray 中间的 下划线为分隔符,相关链接 ...

  3. layout(布局)组件

    一.依赖于 Panel(面 板)组件和 resizable(调整大小)组件. 二.class加载方式    <div id="box" class="easyui- ...

  4. LINUX搭建网站环境教程

    安装Mysql yum install mysql-server -y 启动Mysql service mysqld restart 此实验使用 mysql 默认账户名和密码,您也可以设置自己的 My ...

  5. termcap - 终端功能数据库

    描述 DESCRIPTION termcap 数据库是一个过时 (obsolete) 工具,用来描述以字符为单位的终端和打印机的功能.它之所以被保留,是为了兼容古老的程序:新程序应当使用 termin ...

  6. Ubuntu 14.04 Sublime Text3 Java编译运行(最简单的方法)

    Sublime,结果发现只能编译,无法直接运行,于是就在网上搜解决方法,发现大部分方法都是告诉你要进入Java.sublime-packag这个文件,然后再修改JavaC.sublime-build, ...

  7. Android 使用android-support-multidex解决Dex超出方法数的限制问题,让你的应用不再爆棚(转)

    如有转载,请声明出处: 时之沙: http://blog.csdn.net/t12x3456    (来自时之沙的csdn博客) 随着应用不断迭代,业务线的扩展,应用越来越大(比如集成了各种第三方sd ...

  8. CSS文字超出省略

    .ellipsis { white-space:nowrap overflow:hidden text-overflow:ellipsis }

  9. 在Eclipse上安装Spring Tool Suite

    . 不装IDE会没有Spring bean configure file Spring Tool Suite是一个基于Eclipse IDE开发环境中的用于开发Spring应用程序的工具,提供了开箱即 ...

  10. PyCharm Change Font Size

    file->settings->colors&fonts-> save as (save the current scheme as your own)-> font- ...