输入框贴贴去除样式并插入到指定光标位置（contenteditable="true" 实现的输入框也支持）

相关文章推荐

八块腹肌的西瓜 · [2018 iThome 鐵人賽] Day ...· 2 月前 ·

爱吹牛的瀑布 · MySQL如何获取JSON串的值_mysql ...· 4 月前 ·

大方的烤红薯 · 如何将Ubuntu降级到Python 3.6？· 11 月前 ·

气势凌人的麦片 · How to solve ...· 1 年前 ·

想出家的山寨机 · 过程（五）可选参数和可变参数-腾讯云开发者社 ...· 1 年前 ·

< meta charset = "UTF-8" > < meta http-equiv = "X-UA-Compatible" content = "IE=edge" > < meta name = "viewport" content = "width=device-width, initial-scale=1.0" > < title > Document </ title > < style > /* 输入框 */ #dzm-textarea { padding : 5px ; border : 1px solid red; /* 输入框为空时显示 placeholder */ #dzm-textarea :empty :before { content : attr (placeholder); color : red; /* 输入框获取焦点时移除 placeholder */ #dzm-textarea :focus :before { content : none; </ style > </ head >  < div id = "dzm-textarea" contenteditable = "true" placeholder = "请输入内容" style = "resize: both; overflow: auto;" > </ div > < script > // 支持全部替换（部分浏览器不自带） String . prototype . replaceAll = function ( s1, s2 ) { return this . replace ( new RegExp (s1, "gm" ), s2) // 获取标签 var textarea = document . getElementById ( 'dzm-textarea' ) // 贴贴事件 textarea. onpaste = function ( e ) { // 禁止冒泡 e. preventDefault () // 处理事件 // handlePaste1(e) // handlePaste2(e) handlePaste3 (e) // 方式一：走 execCommand 会保留文本原格式，走上面 if 不会保留原格式跟方式二一样 function handlePaste1 (e) { // 内容 var text = '' // 贴贴数据 var clp = (e. originalEvent || e). clipboardData // 贴贴内容 if (clp && clp. getData ) { text = clp. getData ( 'text/plain' ) || '' } else if ( window . clipboardData && window . clipboardData . getData ) { text = window . clipboardData . getData ( 'text' ) || '' // 内容不为空 if (text !== '' ) { // 数据是否满足指定格式 if (clp === undefined || clp === null ) { // 是否有光标位置 if ( window . getSelection ) { // 有则插入指定位置 var newNode = document . createElement ( 'span' ) newNode. innerHTML = text window . getSelection (). getRangeAt ( 0 ). insertNode (newNode) } else { // 没有则直接贴贴 document . selection . createRange (). pasteHTML (text) // 需要手动调用 oninput 输入事件 } else { // 插入内容，会自动调用 oninput 输入事件 document . execCommand ( 'insertText' , false , text) // 方式二：不会保留文本原格式，需要手动调用 oninput 输入事件 function handlePaste2 (e) { // 内容 var text = '' // 贴贴事件 var clp = (e. originalEvent || e). clipboardData // 贴贴内容 if (clp && clp. getData ) { text = clp. getData ( 'text/plain' ) || '' } else if ( window . clipboardData && window . clipboardData . getData ) { text = window . clipboardData . getData ( 'text' ) || '' // 内容不为空 if (text !== "" ) { // 获取光标位置 if ( window . getSelection ) { // 有位置则插入光标位置 var newNode = document . createElement ( "span" ) newNode. innerHTML = text window . getSelection (). getRangeAt ( 0 ). insertNode (newNode) } else { // 没有直接贴贴 document . selection . createRange (). pasteHTML (text) // 需要手动调用 oninput 输入事件 // 方式三：方式一的升级版，保留原格式，但是会进行文本排版优化，去除多余的空格换行符 function handlePaste3 (e) { // 内容 var text = '' // 贴贴数据 var clp = (e. originalEvent || e). clipboardData // 贴贴内容 if (clp && clp. getData ) { text = clp. getData ( 'text/plain' ) || '' } else if ( window . clipboardData && window . clipboardData . getData ) { text = window . clipboardData . getData ( 'text' ) || '' // 内容不为空 if (text !== '' ) { // 替换内容中间的全角空格为普通空格 text = text. replaceAll ( /　+/ , ' ' ) // 移除开头回车空格 text = text. replaceAll ( /^\s+/ , '' ) // 将内容中间换行空格替换成换行 text = text. replaceAll ( /\n\s+/ , '\n' ) // 替换内容中间多余的空格 text = text. replaceAll ( / +/ , ' ' ) // 数据是否满足指定格式 if (clp === undefined || clp === null ) { // 是否有光标位置 if ( window . getSelection ) { // 有则插入指定位置 var newNode = document . createElement ( 'span' ) newNode. innerHTML = text window . getSelection (). getRangeAt ( 0 ). insertNode (newNode) } else { // 没有则直接贴贴 document . selection . createRange (). pasteHTML (text) // 需要手动调用 oninput 输入事件 } else { // 插入内容，会自动调用 oninput 输入事件 document . execCommand ( 'insertText' , false , text) </ script > </ body > </ html > 爱学习的汉子

粉丝

友情链接：