相关文章推荐
小百科
›
输入框贴贴填充样式并插入下到指派光标位置（contenteditable="true" 达至的输入框也提供支持） - 掘金
想出国的拐杖
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
>
<!-- textarea -->
<
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
>
爱学习的汉子
粉丝
目录
收起
推荐 方式三，扩展性高
相关推荐
html元素contenteditable属性如何定位光标和设置光标
994阅读
·
2点赞
有趣的 contentEditable
1.6k阅读
·
3点赞
contentEditable属性
1.4k阅读
·
3点赞
React中使用contentEditable的坑--setState后光标位置移到开头
4.1k阅读
·
6点赞
div的contenteditable，光标聚集到最后
2.3k阅读
·
2点赞
友情链接：
推荐文章
