这个问题主要是监听 onpaste (鼠标右键粘贴或 Ctrl + V)。
如果 input 值为空，那么很简单，在 onpaste 之后获取 input 的值就是被粘贴的内容。
但如果 input 内已经有内容，用户选择在中间部位粘贴，或者选择一部分内容后再粘贴 (替换粘贴)，那实施起来就比较复杂。下面是完整的代码
function getSelectionBoundary(el, start) {var property = start ? "selectionStart" : "selectionEnd"
var originalValue, textInputRange, precedingRange
, pos, bookmark, isAtEnd
if(typeof el[property] == "number") {
return el[property]
}
else if(document.selection &&document.selection.createRange) {
el.focus()
var range = document.selection.createRange()
if(range) {
if(document.selection.type == "Text") {
range.collapse(!!start)
}
originalValue = el.value
textInputRange = el.createTextRange()
precedingRange = el.createTextRange()
pos = 0
bookmark = range.getBookmark()
textInputRange.moveToBookmark(bookmark)
if(/[\r\n]/.test(originalValue)) {
try {
range.move("character", 1)
isAtEnd = (range.parentElement() != el)
}
catch(ex) {
isAtEnd = true
}
range.moveToBookmark(bookmark)
if(isAtEnd) {
pos = originalValue.length
}
else {
textInputRange.text = " "
precedingRange.setEndPoint("EndToStart",
textInputRange)
pos = precedingRange.text.length - 1
textInputRange.moveStart("character", -1)
textInputRange.text = ""
}
}
else {
precedingRange.setEndPoint("EndToStart", textInputRange)
pos = precedingRange.text.length
}
return pos
}
}
return 0
}
function getInputSelection(ele) {
var start = getSelectionBoundary(ele, true),
end = getSelectionBoundary(ele, false)
return {
start: start,
end: end,
length: end - start,
text: ele.value.slice(start, end)
}
}
function detectPaste(ele, callback) {
ele.onpaste = function() {
var sel = getInputSelection(ele)
var initialLength = ele.value.length
window.setTimeout(function() {
var val = ele.value
var pastedTextLength =
val.length - (initialLength - sel.length)
var end = sel.start + pastedTextLength
callback({
start: sel.start,
end: end,
length: pastedTextLength,
text: val.slice(sel.start, end),
replacedText: sel.text
})
}, 1)
}
}
以上都是监听 onpaste 和获取粘贴内容的函数，下面是用法。（如果你只是使用，不需要理解上面代码的内容）
window.onload = function() {// 获取要监听的 input 或 textarea
var content = document.getElementById("content")
// 开始监听，第二个参数为回调函数，返回一个对象，其中包括
// start: 光标开始位置，end: 粘贴后光标位置
// length: 粘贴内容的长度，replacedtext: 被替换的内容
// text: 这个就是被粘贴的内容
detectPaste(content, function(pasteInfo) {
alert(pasteInfo.text)
})
} <input type="text" id="content" value="" />
欢迎分享，转载请注明来源：夏雨云
微信扫一扫
支付宝扫一扫
评论列表（0条）