javascript - javascript textarea处理中的复制剪切粘贴功能
问题描述
我正在尝试在以下位置编写这些函数:
https://jsfiddle.net/7rqgkozp/50/
HTML:
<textarea id="text_element" style="width:100%;height:200px" >Copy this ss!</textarea>
<br>
<button onclick="copyToClipboard('text_element')">
Copy to clipboard
</button>
<button onclick="cutToClipboard('text_element')">
cut to clipboard
</button>
<button onclick="pastefromclipboard('text_element')">
paste
</button>
Javascript:
function copyToClipboard(elementId) {
// Create an auxiliary hidden input
var Tselected = getSel(); // Execute the copy command
var aux = document.createElement("input");
aux.setAttribute("type","text");
aux.setAttribute("value",Tselected);
aux.setAttribute("id","Tselected");
document.body.appendChild(aux);
// Highlight the content
aux.select();
document.execCommand("copy");
}
function cutToClipboard(elementId) {
var Tselected = getSel(); //get selected text
// Create an auxiliary hidden input
var aux = document.createElement("input");
aux.setAttribute("type","text");
aux.setAttribute("value",Tselected);
aux.setAttribute("id","Tselected");
document.body.appendChild(aux);
// Highlight the content
aux.select();
var myInput = document.getElementById("text_element");
var myInputVal = myInput.value;
var newvalue = myInputVal.replace(Tselected, "");
myInput.value = newvalue;
//
document.execCommand("copy");
}
function pastefromclipboard(){
var Tselected = document.getElementById("Tselected");
var TselectedVal = Tselected.value;
var myInput = document.getElementById("text_element");
document.execCommand("paste");
myInput.value += TselectedVal;
document.body.removeChild(Tselected);
document.getElementById("my-element").remove();
}
function getSel() // javascript
{
// obtain the object reference for the <textarea>
var txtarea = document.getElementById("text_element");
// obtain the index of the first selected character
var start = txtarea.selectionStart;
// obtain the index of the last selected character
var finish = txtarea.selectionEnd;
// obtain the selected text
var sel = txtarea.value.substring(start, finish);
// do something with the selected content
return sel;
}
但我只能在 textarea 末尾复制和粘贴文本,但我需要将其粘贴到用户单击 textarea 的位置
代码已更新
解决方案
Fixed That by changing the paste function into :
function pastefromclipboard() {
var Tselected = document.getElementById("Tselected");
var TselectedVal = Tselected.value;
var myInput = document.getElementById("text_element");
document.execCommand("paste");
if (myInput.setRangeText) {
//if setRangeText function is supported by current browser
myInput.setRangeText(TselectedVal)
} else {
myInput.focus()
myInput.execCommand('insertText', false /*no UI*/ , TselectedVal);
}
document.body.removeChild(Tselected);
document.getElementById("my-element").remove();
}
推荐阅读
- elasticsearch - ElasticSearch 术语聚合不适用于自定义分析器和模式标记器
- rest - Websphere 8.5 中的 CXF Rest 服务
- mysql - 如何为每个类别检索一个随机行?
- java - 当我使用 SendKeys 在字段中发送日期并且当我运行脚本时,它会在该字段中粘贴两次日期
- python - 将方差分析结果转换为数据框
- python - 如何在 django 中使用移动 otp 验证用户注册?
- powershell - 在 Powershell 中将 JSON 转换为 Csv 列
- terraform - 使用 Terraform 将叶子接口附加到 Cisco ACI 上的 EPG
- python - 在 ubuntu 上,如何在现有的 python3.6(或更新版本)安装旁边安装 python3.5?
- apache-kafka - broker的数量和partition的数量会影响partition leader的选举吗?