javascript捕获文本区域中的粘贴事件

2024-05-22

我目前有一个文本区域,我需要控制已粘贴的文本,

本质上,我需要能够将用户想要粘贴到文本区域中的任何内容并将其放入变量中。

然后我将计算出他们粘贴文本的位置和字符串的大小,以将其从文本区域中删除,

然后最后用我自己的方式处理变量中的文本。

我的问题:我将如何获取用户刚刚粘贴的变量中的文本副本?

Thanks.


前几天我回答过类似的问题:使用 ctrl+v 或右键单击 -> 粘贴检测粘贴的文本 https://stackoverflow.com/questions/3211505/detect-pasted-text-with-ctrlv-or-right-click-paste/3212056#3212056。这次我包含了一个相当长的函数,可以准确地获取 IE 中文本区域的选择边界;剩下的就比较简单了。

您可以使用粘贴事件来检测大多数浏览器中的粘贴(尤其是 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);
    });
};
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

javascript捕获文本区域中的粘贴事件 的相关文章

随机推荐

  • 在生产者-消费者情况下使用条件变量

    我正在尝试了解条件变量以及如何在生产者 消费者情况下使用它 我有一个队列 其中一个线程将数字推入队列 而另一个线程从队列中弹出数字 当生产线程放置一些数据时 我想使用条件变量向消费线程发出信号 问题是有时 或大多数时候 它只将最多两个项目推
  • 56 CONNECT 后收到来自代理的 HTTP 代码 403?

    使用 cUrl 从我的网页生成销售人员线索时 出现 56 在 CONNECT 后从代理接收到 HTTP 代码 403 错误 该网站的 SSL 证书已过期 UPDATED 我的代码如下 curl setopt curl CURLOPT URL
  • 使用 XSLT 合并 2 个具有匹配“id”属性的 XML 文件

    当存在匹配的 id 属性时 我想使用 XSLT 合并 2 个 XML 文件 myFile1 xml 这是第一个输入文件
  • Java基于参数的同步(名为互斥锁/锁)

    我正在寻找一种根据接收到的参数来同步方法的方法 如下所示 public synchronized void doSomething name some code 我想要方法doSomething同步基于name参数如下 线程 1 doSom
  • Ruby 2 升级破坏了 Nokogiri 和/或 open-uri 编码?

    将 Rails3 2 Ruby 1 9 应用程序升级到 Rails3 2 Ruby 2 1 2 时 我有一个谜团需要解决 Nokogiri 似乎崩溃了 因为它使用 open uri 改变了它的行为 没有改变 gem 版本 只是改变 ruby
  • 使用 FileTable 通过 SQL INSERT 创建子目录

    之前 我请求如何在一个目录中创建一个目录FileTable不使用文件 I O API https stackoverflow com q 10483906 175679 我现在想为刚刚创建的父目录创建一个子目录 在插入期间如何分配我的父母
  • 布隆过滤器的使用

    我正在努力理解布隆过滤器的用处 我了解了它的底层逻辑 空间压缩 快速查找 误报等 我只是不能将这个概念应用到现实生活中 因为它是有益的 一种常见的应用是在 Web 缓存中使用布隆过滤器 我们使用布隆过滤器来确定给定的 URL 是否在缓存中
  • 部署到 Glassfish 4.1 时 URL 模式无效

    如果用户已经通过身份验证 我有一个网络过滤器可以从登录和索引页面重定向 最初我有一个无效的 URL 模式 我修复了无效模式并尝试重新部署以接收以下内容 java lang IllegalArgumentException Invalid U
  • 内核makefile中的$(call cmd,tags)这里的cmd指的是什么?

    在内核 Makefile 中我发现如下代码 ctags CTAGS CSCOPE HEADERS SOURCES ETAGS ETAGSFALGS HEADERS SOURCES call cmd ctags 另外 在哪里可以找到宏或函数
  • Flutter - 如何将用户数据传递到所有视图

    我是 Flutter 世界和移动应用程序开发的新手 并且正在努力解决如何在整个应用程序中传递用户数据的问题 我已经尝试了几件事 但似乎没有一个很好 我确信我应该遵循一些最佳实践模式 因为它使示例更容易 所以我使用 firebase 进行身份
  • 如何防止 CSS 或 jQuery 中单词和标点符号之间的换行

    我在一个段落中有一些文字 我的问题是 当标点符号位于单词末尾时 有时可以换行到下一行 像这样 This is the text This is a new line 我可以用 CSS 或 jQuery 解决这个问题吗 如果您不在单词和标点符
  • 在运行时更改 swagger-ui 服务器变量

    使用 openapi v3 配置 我有一个名为 主机名 的服务器变量 用于构建 url 例如 servers url http hostname api variables hostname default some default her
  • 保留以下文本的标题

    我正在使用 css 列计数功能将我的部分分成两列 在一个页面上 我在第一列的底部有一个 h3 标题 在下一列的顶部有一个 p 段落 我想保留该段落的前几句话的标题 我可以将其与整个段落一起包装在使用 inline block 样式的 div
  • 如何使用 YouTube Data API v3 获取直播小 URL

    function authenticate return gapi auth2 getAuthInstance signIn scope https www googleapis com auth youtube readonly then
  • 多维数组将每个列表数组存储在另一个数组中

    我嵌套了可能有 2 或 3 层深度的多维数组 在它里面我可能有也可能没有列表数组 我需要循环数组 Array 0 gt Array id gt 1 name gt cat name 1 list gt Array 1 gt swgdgbdg
  • JPA中如何连接多个数据库?

    我有一个 Spring Boot 应用程序 当前使用 JPA 连接到单个数据库 application properties 文件中的连接详细信息 spring datasource url jdbc oracle thin localho
  • PHP 中是否有像 C++ 一样的纯虚函数

    我本以为很多人会想知道这是否可能 但我找不到任何重复的问题 请纠正我 我只是想知道PHP是否提供纯虚函数 我想要以下 class Parent no implementation given public function foo noth
  • 如何重定向到 warp 中带有尾部斜杠的 URL?

    我在用warp https crates io crates warp提供静态文件目录 不幸的是 当我在路径中添加尾部斜杠时 只能解析这些静态文件中使用的相对链接 这是我用来服务目录的代码 let route warp path segme
  • 为什么以下代码不允许我使用 fgets 获取用户输入但可以使用 scanf?

    这是一个更大程序的简短摘录 但该程序的其余部分无关紧要 因为我认为我能够隔离该问题 我怀疑这与我使用 fgets 的方式有关 我读过 最好使用 fgets 而不是 scanf 但我似乎无法让它在这里正常工作 当我使用以下代码时 程序不会给我
  • javascript捕获文本区域中的粘贴事件

    我目前有一个文本区域 我需要控制已粘贴的文本 本质上 我需要能够将用户想要粘贴到文本区域中的任何内容并将其放入变量中 然后我将计算出他们粘贴文本的位置和字符串的大小 以将其从文本区域中删除 然后最后用我自己的方式处理变量中的文本 我的问题