html textarea粘贴事件,javascript在textarea中捕获粘贴事件
我目前有一个textarea,我需要控制粘贴的文本,
基本上我需要能够将用户想要粘贴的任何内容粘贴到textarea并将其放入变量中.
然后,我将确定它们粘贴文本的位置和字符串的大小,以便从textarea中删除它,
然后在最后以我自己的方式处理变量中的文本.
我的问题:如何在用户粘贴的变量中获取文本的副本?
谢谢.
解决方法:
我几天前回答了一个类似的问题:Detect pasted text with ctrl+v or right click -> paste.这次我已经包含了很长的函数,可以准确地在IE中的textarea中获取选择边界;其余的相对简单.
您可以使用粘贴事件来检测大多数浏览器中的粘贴(特别是Firefox 2).处理粘贴事件时,记录当前选择,然后设置一个在粘贴完成后调用函数的简短计时器.然后,此函数可以比较长度以了解在何处查找粘贴的内容.类似于以下内容:
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) {
// Collapse the selected range if the selection is not a caret
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)) {
// Trickier case where input value contains line breaks
// Test whether the selection range is at the end of the
// text input by moving it on by one character and
// checking if it's still within the text input.
try {
range.move("character", 1);
isAtEnd = (range.parentElement() != el);
} catch (ex) {
log.warn("Error moving range", ex);
isAtEnd = true;
}
range.moveToBookmark(bookmark);
if (isAtEnd) {
pos = originalValue.length;
} else {
// Insert a character in the text input range and use
// that as a marker
textInputRange.text = " ";
precedingRange.setEndPoint("EndToStart", textInputRange);
pos = precedingRange.text.length - 1;
// Delete the inserted character
textInputRange.moveStart("character", -1);
textInputRange.text = "";
}
} else {
// Easier case where input value contains no line breaks
precedingRange.setEndPoint("EndToStart", textInputRange);
pos = precedingRange.text.length;
}
return pos;
}
}
return 0;
}
function getTextAreaSelection(textarea) {
var start = getSelectionBoundary(textarea, true),
end = getSelectionBoundary(textarea, false);
return {
start: start,
end: end,
length: end - start,
text: textarea.value.slice(start, end)
};
}
function detectPaste(textarea, callback) {
textarea.onpaste = function() {
var sel = getTextAreaSelection(textarea);
var initialLength = textarea.value.length;
window.setTimeout(function() {
var val = textarea.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);
};
}
window.onload = function() {
var textarea = document.getElementById("your_textarea");
detectPaste(textarea, function(pasteInfo) {
var val = textarea.value;
// Delete the pasted text and restore any previously selected text
textarea.value = val.slice(0, pasteInfo.start) +
pasteInfo.replacedText + val.slice(pasteInfo.end);
alert(pasteInfo.text);
});
};
标签:javascript,events,textarea,paste
来源: https://codeday.me/bug/20190701/1342243.html
html textarea粘贴事件,javascript在textarea中捕获粘贴事件相关推荐
- html动态生成按钮事件,javascript 动态生成按钮并添加事件时为什么不响应?
javascript 动态生成按钮并添加事件时为什么事件不响应?(谢谢大家!) 1)html部分 1 2 3 4 5 6 7 8 9 10 11 12 2)script部分 //_t 为一个现在的Ta ...
- html中的鼠标事件怎么写,html5中的鼠标事件以及鼠标事件属性
鼠标事件 先列出html5中鼠标常见的一系列事件: 事件名称 描述 onclick 当单击鼠标时运行脚本 ondblclick 当双击鼠标时运行脚本 ondrag 当拖动元素时运行脚本 ondrage ...
- linux终端vi怎么复制粘贴,如何在VI编辑器中复制粘贴内容?
问题描述 我尝试使用CTRL + V粘贴VI编辑器文档中的内容,但CTRL + V不被解释为粘贴. 最佳解决思路 首先,确保您处于编辑模式(按i).然后,如果您使用的是gnome-terminal等终 ...
- javascript在网页中实现粘贴qq截图功能
这篇文章主要介绍了在网页中实现读取剪贴板粘贴截图功能,即可以把剪贴板的截图Ctrl+V粘贴到网页的一个输入框中,例如QQ截图.旺旺截图或者其它截图软件.具体代码如下. <!DOCTYPE HTM ...
- html制作qq注册页面代码截图,javascript在网页中实现粘贴qq截图功能
这篇文章主要介绍了在网页中实现读取剪贴板粘贴截图功能,即可以把剪贴板的截图Ctrl+V粘贴到网页的一个输入框中,例如QQ截图.旺旺截图或者其它截图软件.具体代码如下. 利用 clipboardData ...
- java jtextfield 事件_java – 处理JTextField中的编辑事件
我有一个登录表单,用户可以输入他的凭据进行登录.我有一个JLabel,用于显示告诉用户用户名不能为空的文本.用户在文本字段为空时单击登录按钮后显示此标签. 我想在用户开始在文本字段中输入的那一刻,带有 ...
- android 蓝牙耳机按钮,如何利用android从蓝牙耳机中捕获关键事件_bluetooth_开发99编程知识库...
将广播侦听器添加到 MEDIA_BUTTON: 你应该在应用程序( 不在清单文件中) 中注册你的广播接收器. 否则,谷歌音乐播放器将捕捉你的广播和船上. 你的IntentFilter 优先级应该高于其 ...
- java 自定义事件_在Java中创建自定义事件
你可能想调查一下观测器模式. 下面是一些让自己开始工作的示例代码:import java.util.*;// An interface to be implemented by everyone in ...
- html如何设置滑轮效果,HTML中鼠标滚轮事件onmousewheel处理
滚轮事件是不同浏览器会有一点点区别,一个像Firefox使用DOMMouseScroll ,ff也可以使用addEventListener方法绑定DomMouseScroll事件,其他的浏览器滚轮事件 ...
最新文章
- 移动互联网用户的心理需求【转载】
- 用神经网络分类无理数2**0.5和3**0.5
- 用matlab跑神经网络模型,怎样在matlab里建立一个BP神经网络模型?
- content of maven-uilib-pom - the eslint and jslint are configured here
- info testing mysql_SQLMASQLMAP中文说明(linux版本)
- 肌电信号的包络matlab程序_基于matlab的肌电信号处理程序
- 简单-三层-存储过程-增删改《一》
- springMVC get 提交乱码
- 解决AS3 Socket编程中最令人头疼的问题
- python 操作oracle 执行脚本_CentOS 7定时执行python脚本
- initShaders P30 在webgl内部建立和初始化着色器
- sql怎么把小数变百分比_Excel怎么自动算出百分比?
- (一百五十一)Android P 真正创建sta iface的地方
- 作为执行控制功能”守门人”的前岛叶
- 使用CA签发的服务器证书搭建Tomcat双向SSL认证服务(转)
- 大多数人不知道的企业数据分析能力金字塔,你处在哪一级?
- 中国移动规范学习——4A技术要求(综述)
- Nexus 7 二代 挂在U盘成功
- python利用正则爬取内涵段子内容
- 让预训练语言模型读懂数字:超对称技术发布 10 亿参数 BigBang Transformer [乾元]金融大规模预训练语言模型
热门文章
- pyqt5_tools下找不到designer.exe新版的designer.exe放在\pyqt5_tools\Qt\bin下
- SharePoint 报告工具 (SPReport)
- 怎样把一个字典的数据添加到另一个字典中?
- Exchange2003/2010共存模式环境迁移
- 常用C/C++预处理指令详解
- 串结构练习--字符串匹配
- 电影'社交网络'获金球奖最佳影片,最佳编剧,最佳导演,最佳配乐奖
- 一封写给2009年自己的信
- c++ 输出格式控制
- [转载] Python的变量与常量与基本命名规则