js默认文本框粘贴事件完美实现详解

目录
  • 前言
  • 先上代码
  • 代码分析

前言

本文实际是用js移动控制光标的位置!解决了网上没有可靠教程的现状

默认情况对一个文本框粘贴,应该会有这样的功能:

  • 粘贴文本后,光标不会回到所有文本的最后位置,而是在粘贴的文本之后
  • 将选中的文字替换成粘贴的文本

但是由于需求,我们需要拦截粘贴的事件,对剪贴板的文字进行过滤,这时候粘贴的功能都得自己实现了,而一旦自己实现,上面2个功能就不见了,我们就需要还原它。

面对这样的需求,我们肯定要控制移动光标,可是现在的网上环境真的是惨,千篇一律的没用代码...于是我就发表了这篇文章。

先上代码

    <textarea id="text" style="width: 996px; height: 423px;"></textarea>
    <script>
        // 监听输入框粘贴事件
        document.getElementById('text').addEventListener('paste', function (e) {
            e.preventDefault();
            let clipboardData = e.clipboardData.getData('text');
            // 这里写你对剪贴板的私货
            let tc = document.querySelector("#text");
            tc.focus();
            const start = (tc.value.substring(0,tc.selectionStart)+clipboardData).length;
            if(tc.selectionStart != tc.selectionEnd){
                tc.value = tc.value.substring(0,tc.selectionStart)+clipboardData+tc.value.substring(tc.selectionEnd)
            }else{
                tc.value = tc.value.substring(0,tc.selectionStart)+clipboardData+tc.value.substring(tc.selectionStart);
            }

            // 重新设置光标位置
            tc.selectionEnd =tc.selectionStart = start
        });
    </script>

怎么理解上述两个功能? 第一个解释: 比如说现在文本框有:

染念真的很生气

如果我们现在在真的后面粘贴不要,变成

染念真的不要很生气|

拦截后的光标是在生气后面,但是我们经常使用发现,光标应该出现在不要的后面吧! 就像这样:

染念真的不要|很生气

第2个解释:

染念真的不要很生气

我们全选真的的同时粘贴求你,拦截后会变成

染念真的求你不要很生气|

但默认应该是:

染念求你|不要很生气

代码分析

针对第2个问题,我们应该先要获取默认的光标位置在何处,tc.selectionStart是获取光标开始位置,tc.selectionEnd是获取光标结束位置。 为什么这里我写了一个判断呢?因为默认时候,我们没有选中一块区域,就是把光标人为移动到某个位置(读到这里,光标在位置后面,现在人为移动到就是前面,这个例子可以理解不?),这个时候两个值是相等的。

233|333

^--- ^

1-- - 4

tc.selectionEnd=4,tc.selectionStart = 4

如果相等,说明就是简单的定位

tc.value = tc.value.substring(0,tc.selectionStart)+clipboardData+tc.value.substring(tc.selectionStart); tc.value.substring(0,tc.selectionStart)

获取光标前的内容,tc.value.substring(tc.selectionStart)是光标后的内容。 如果不相等,说明我们选中了一个区域(光标选中一块区域说明我们选中了一个区域),代码只需要在最后获取光标后的内容这的索引改成tc.selectionEnd

|233333|

^----- ^

1----- 7

tc.selectionEnd=7,tc.selectionStart = 1

在获取光标位置之前,我们应该先使用tc.focus();聚焦,使得光标回到文本框的默认位置(最后),这样才能获得位置。 针对第1个问题,我们就要把光标移动到粘贴的文本之后,我们需要计算位置。

获得这个位置,一定要在tc.value重新赋值之前,因为这样的索引都没有改动。 const start = (tc.value.substring(0,tc.selectionStart)+clipboardData).length;这个代码和上面解释重复,很简单,我就不解释了。

最后处理完了,重新设置光标位置,tc.selectionEnd =tc.selectionStart = start,一定让selectionEnd和selectionStart相同,不然选中一个区域了。

如果我们在value重新赋值之后获取(tc.value.substr(0,tc.selectionStart)+clipboardData).length,大家注意到没,我们操作的是tc.value,value已经变了,这里的重新定位光标开始已经没有任何意义了!

以上就是js默认文本框粘贴事件完美实现详解的详细内容,更多关于js默认文本框粘贴事件的资料请关注我们其它相关文章!

(0)

相关推荐

  • Js实现粘贴上传图片的原理及示例

    我们或多或少都使用过各式各样的富文本编辑器,其中有一个很方便功能,复制一张图片然后粘贴进文本框,这张图片就被上传了,那么这个方便的功能是如何实现的呢? 原理分析: 复制=>粘贴=>上传 在这个操作过程中,我们需要做的就是:监听粘贴事件=>获取剪贴板里的内容=>发请求上传 需要明白的是: 我们只能上传截图工具截的图片(qq截图.微信截图等),不能粘贴上传系统里的图片(从桌面上.硬盘里复制),因为他们是存在完全不同的地方. 知悉paste event这个事件:当进行粘贴(右键paste

  • Web js实现复制文本到粘贴板

    本文实例为大家分享了Web js实现复制文本到粘贴板的具体代码,供大家参考,具体内容如下 一.简述 记--简单用js实现将元素的文本内容复制到粘贴板. 二.效果 三.代码 <!DOCTYPE html> <html>   <head>     <meta charset="utf-8" />     <title>js复制内容到粘贴板</title>     <script type="text/j

  • js实现图片粘贴到网页

    本文实例实现通过按下ctrl + v将粘贴板上的图片粘贴到网页中,话不说直接上代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>图片粘贴</title> <style> #img{ width: 500px; } </style> <img id="img&qu

  • js实现复制粘贴的两种方法

    本文实例为大家分享了js实现复制粘贴的具体代码,供大家参考,具体内容如下 一.前沿 界面需要复制功能,所以就写了一个作为简单记录 二.方法.推荐第二种. 1.第一种方法 1).通过 document.execCommand('copy') 2).前端代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>cons

  • js复制文本到粘贴板(Clipboard.writeText())

    目录 复制文本到粘贴板(Clipboard.writeText()) 网上的代码 clipboard.js Clipboard.writeText() 复制内容到剪贴板(无插件,兼容所有浏览器) 复制文本到粘贴板(Clipboard.writeText()) js如何复制文本到粘贴板呢,网上所说的各种复制..在Chrome或者说在我这个项目都没用. windows.copy document.execCommand(“copy”); clipboard.js Clipboard.writeTex

  • js默认文本框粘贴事件完美实现详解

    目录 前言 先上代码 代码分析 前言 本文实际是用js移动控制光标的位置!解决了网上没有可靠教程的现状 默认情况对一个文本框粘贴,应该会有这样的功能: 粘贴文本后,光标不会回到所有文本的最后位置,而是在粘贴的文本之后 将选中的文字替换成粘贴的文本 但是由于需求,我们需要拦截粘贴的事件,对剪贴板的文字进行过滤,这时候粘贴的功能都得自己实现了,而一旦自己实现,上面2个功能就不见了,我们就需要还原它. 面对这样的需求,我们肯定要控制移动光标,可是现在的网上环境真的是惨,千篇一律的没用代码...于是我就

  • JS之if语句对接事件动作逻辑(详解)

    if 函数的实现步骤: function +名字() 指定id , 指定开关(display: none or block) if + else 构成逻辑 控制开关 决定在哪里安置一个灯泡, 指定一个id给某个标签 把开关用电线连着灯泡, 安装开关#+id名称{ 属性1= 赋值, 属性 2 = 赋值 , 属性3 = 赋值 } 所有的赋值都可以成为一个开关. 如果是一个手动版的, 这里已经完成了. 更改属性的赋值就可以变更id的样式 帮开关装上感应元件, 一旦有动静, 开关便自动switch 建立

  • .net,js捕捉文本框回车键事件的小例子(兼容多浏览器)

    js: 复制代码 代码如下: function bubufx_enterpress(e) {         var keynum; if (window.event) // IE           {             keynum = e.keyCode; }         else if (e.which) // Netscape/Firefox/Opera           {             keynum = e.which;         }         i

  • React.Js添加与删除onScroll事件的方法详解

    React简介 React是有Facebook开发出来用于构建前端界面的JS组件库,由于其背后的强大背景,使得这款库在技术开发上完全没有问题. React的优势 解决大规模项目开发中数据不断变化变得难以操作的问题: 组件化开发,使得开发更加快速: 单向数据流,有利于找到问题: 虚拟DOM,在React内部有一套diff算法可以快速的计算出整体需要改动的位置,从而做到快速局部刷新:举个栗子:删除一个列表再插入个新表,计算后会比较出不同然后插进去: 前言 大家都可能会遇到这样的问题,那就是滚动事件

  • js控制文本框只能输入中文、英文、数字与指定特殊符号的实现代码

    JS 控制文本框只能输入数字 <input onkeyup="value=value.replace(/[^0-9]/g,'')"onpaste="value=value.replace(/[^0-9]/g,'')" oncontextmenu ="value=value.replace(/[^0-9]/g,'')"> JS 控制文本框只能输入数字.小数点 <inputonkeyup="value=value.repl

  • js控制文本框输入的字符类型方法汇总

    JS 控制文本框只能输入数字 复制代码 代码如下: <input onkeyup="value=value.replace(/[^0-9]/g,'')" onpaste="value=value.replace(/[^0-9]/g,'')" oncontextmenu ="value=value.replace(/[^0-9]/g,'')"> JS 控制文本框只能输入数字.小数点 复制代码 代码如下: <input onkeyu

  • js实现文本框选中的方法

    本文实例讲述了js实现文本框选中的方法.分享给大家供大家参考.具体如下: 这段javascript代码可解决文本框获得焦点,即使得文本框的内容被选中. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www

  • js控制文本框只输入数字和小数点的方法

    本文实例讲述了js控制文本框只输入数字和小数点的方法.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: function clearNoNum(obj) {  obj.value = obj.value.replace(/[^\d.]/g, "");//清除"数字"和"."以外的字符  obj.value = obj.value.replace(/^\./g, "");//验证第一个字符是数字而不是.  obj.

  • js判断文本框剩余可输入字数的方法

    本文实例讲述了js判断文本框剩余可输入字数的方法.分享给大家供大家参考.具体如下: 目的:为了更直观的体现用户在文本框输入文本时能看到自己输入了多少字,项目中需要通过判断提示文本框剩余可输入字数 JS实现方法 复制代码 代码如下: <html>  <head runat="server">      <title></title>      <script type="text/javascript"> 

  • js实现文本框只允许输入数字并限制数字大小的方法

    本文实例讲述了js实现文本框只允许输入数字并限制数字大小的方法.分享给大家供大家参考.具体如下: 这是一个很个性的输入框特效,规定文本框只允许输入数字,如果你执意要输入其它的字符,则输入的字符将自动消失,除非你输入的是规定内的字符格式,并且对输入数字大小也有限制!为保证兼容性,请使用火狐浏览器. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-input-limit-num-codes/ 具体代码如下: <!DOCTYPE html PUB

随机推荐