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

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
在uni-apptextarea元素的@input事件支持回车键。在手机端,没有键盘事件,所以不支持按键修饰符。如果你想实现在textarea按下回车键触发事件的功能,可以使用@confirm事件。通过定义一个confirm-type属性为"search"的input元素,并在@confirm事件执行你想要的操作,即可实现该功能。具体代码如下: ```html <textarea v-model="content" confirm-type="search" @confirm="doSomething"></textarea> ``` 其,v-model指令用于双向绑定textarea的内容,confirm-type属性设置为"search",@confirm事件绑定一个方法doSomething,当用户在textarea按下回车键时,会触发该方法。你可以在doSomething方法编写你需要执行的代码。这样就能够在textarea实现按下回车键触发事件的功能了。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* [uniapp input 判断输入enter (@keyup.13失效)](https://blog.csdn.net/qq_41767945/article/details/119676040)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT3_1"}}] [.reference_item style="max-width: 33.333333333333336%"] - *2* [uni-app单页开发@input 与@confirm 使用 仿淘宝搜索功能](https://blog.csdn.net/weixin_45923100/article/details/106797057)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT3_1"}}] [.reference_item style="max-width: 33.333333333333336%"] - *3* [UNI-APP_uni-app input监听回车键](https://blog.csdn.net/weixin_44599931/article/details/111026382)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT3_1"}}] [.reference_item style="max-width: 33.333333333333336%"] [ .reference_list ]

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值