我目前有一个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中捕获粘贴事件相关推荐

  1. html动态生成按钮事件,javascript 动态生成按钮并添加事件时为什么不响应?

    javascript 动态生成按钮并添加事件时为什么事件不响应?(谢谢大家!) 1)html部分 1 2 3 4 5 6 7 8 9 10 11 12 2)script部分 //_t 为一个现在的Ta ...

  2. html中的鼠标事件怎么写,html5中的鼠标事件以及鼠标事件属性

    鼠标事件 先列出html5中鼠标常见的一系列事件: 事件名称 描述 onclick 当单击鼠标时运行脚本 ondblclick 当双击鼠标时运行脚本 ondrag 当拖动元素时运行脚本 ondrage ...

  3. linux终端vi怎么复制粘贴,如何在VI编辑器中复制粘贴内容?

    问题描述 我尝试使用CTRL + V粘贴VI编辑器文档中的内容,但CTRL + V不被解释为粘贴. 最佳解决思路 首先,确保您处于编辑模式(按i).然后,如果您使用的是gnome-terminal等终 ...

  4. javascript在网页中实现粘贴qq截图功能

    这篇文章主要介绍了在网页中实现读取剪贴板粘贴截图功能,即可以把剪贴板的截图Ctrl+V粘贴到网页的一个输入框中,例如QQ截图.旺旺截图或者其它截图软件.具体代码如下. <!DOCTYPE HTM ...

  5. html制作qq注册页面代码截图,javascript在网页中实现粘贴qq截图功能

    这篇文章主要介绍了在网页中实现读取剪贴板粘贴截图功能,即可以把剪贴板的截图Ctrl+V粘贴到网页的一个输入框中,例如QQ截图.旺旺截图或者其它截图软件.具体代码如下. 利用 clipboardData ...

  6. java jtextfield 事件_java – 处理JTextField中的编辑事件

    我有一个登录表单,用户可以输入他的凭据进行登录.我有一个JLabel,用于显示告诉用户用户名不能为空的文本.用户在文本字段为空时单击登录按钮后显示此标签. 我想在用户开始在文本字段中输入的那一刻,带有 ...

  7. android 蓝牙耳机按钮,如何利用android从蓝牙耳机中捕获关键事件_bluetooth_开发99编程知识库...

    将广播侦听器添加到 MEDIA_BUTTON: 你应该在应用程序( 不在清单文件中) 中注册你的广播接收器. 否则,谷歌音乐播放器将捕捉你的广播和船上. 你的IntentFilter 优先级应该高于其 ...

  8. java 自定义事件_在Java中创建自定义事件

    你可能想调查一下观测器模式. 下面是一些让自己开始工作的示例代码:import java.util.*;// An interface to be implemented by everyone in ...

  9. html如何设置滑轮效果,HTML中鼠标滚轮事件onmousewheel处理

    滚轮事件是不同浏览器会有一点点区别,一个像Firefox使用DOMMouseScroll ,ff也可以使用addEventListener方法绑定DomMouseScroll事件,其他的浏览器滚轮事件 ...

最新文章

  1. 移动互联网用户的心理需求【转载】
  2. 用神经网络分类无理数2**0.5和3**0.5
  3. 用matlab跑神经网络模型,怎样在matlab里建立一个BP神经网络模型?
  4. content of maven-uilib-pom - the eslint and jslint are configured here
  5. info testing mysql_SQLMASQLMAP中文说明(linux版本)
  6. 肌电信号的包络matlab程序_基于matlab的肌电信号处理程序
  7. 简单-三层-存储过程-增删改《一》
  8. springMVC get 提交乱码
  9. 解决AS3 Socket编程中最令人头疼的问题
  10. python 操作oracle 执行脚本_CentOS 7定时执行python脚本
  11. initShaders P30 在webgl内部建立和初始化着色器
  12. sql怎么把小数变百分比_Excel怎么自动算出百分比?
  13. (一百五十一)Android P 真正创建sta iface的地方
  14. 作为执行控制功能”守门人”的前岛叶
  15. 使用CA签发的服务器证书搭建Tomcat双向SSL认证服务(转)
  16. 大多数人不知道的企业数据分析能力金字塔,你处在哪一级?
  17. 中国移动规范学习——4A技术要求(综述)
  18. Nexus 7 二代 挂在U盘成功
  19. python利用正则爬取内涵段子内容
  20. 让预训练语言模型读懂数字:超对称技术发布 10 亿参数 BigBang Transformer [乾元]金融大规模预训练语言模型

热门文章

  1. pyqt5_tools下找不到designer.exe新版的designer.exe放在\pyqt5_tools\Qt\bin下
  2. SharePoint 报告工具 (SPReport)
  3. 怎样把一个字典的数据添加到另一个字典中?
  4. Exchange2003/2010共存模式环境迁移
  5. 常用C/C++预处理指令详解
  6. 串结构练习--字符串匹配
  7. 电影'社交网络'获金球奖最佳影片,最佳编剧,最佳导演,最佳配乐奖
  8. 一封写给2009年自己的信
  9. c++ 输出格式控制
  10. [转载] Python的变量与常量与基本命名规则