js默认文本框粘贴事件怎么实现(JS,开发技术)

时间:2024-04-28 04:37:58 作者 : 石家庄SEO 分类 : 开发技术
  • TAG :

    js%E9%BB%98%E8%AE%A4%E6%96%87%E6%9C%AC%E6%A1%86%E7%B2%98%E8%B4%B4%E4%BA%8B%E4%BB%B6%E6%80%8E%E4%B9%88%E5%AE%9E%E7%8E%B0

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

染念真的很生气

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

染念真的不要很生气|

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

染念真的不要|很生气

第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默认文本框粘贴事件怎么实现的详细内容,希望对您有所帮助,信息来源于网络。
上一篇:react组件mount好几次如何解决下一篇:

4 人围观 / 0 条评论 ↓快速评论↓

(必须)

(必须,保密)

阿狸1 阿狸2 阿狸3 阿狸4 阿狸5 阿狸6 阿狸7 阿狸8 阿狸9 阿狸10 阿狸11 阿狸12 阿狸13 阿狸14 阿狸15 阿狸16 阿狸17 阿狸18