「这是我参与11月更文挑战的第6天，活动详情查看：2021最后一次更文挑战」

业务场景

点击按钮进行复制，如图点击复制按钮可以把appid和secret两个输入框内容复制到粘贴板。思考过程： 1.给两个输入框加上id，读取id里面内容后再进行复制。 2.后来觉得这个加id的方法太麻烦了，因为appid和secret的数据都是后端传过来的，直接读取内容写入粘贴板会更方便。在这里插入图片描述

先在html写个demo

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>copy</title>
</head>

<body>
    <textarea cols="20" rows="10" id="biao1">用户定义的代码区域</textarea>
    <input type="button" onClick="copyUrl2()" value="点击复制代码" />
    <hr>
    <script type="text/javascript">
        function copyUrl2() {
            var Url2 = document.getElementById("biao1");
            Url2.select(); // 选择对象
            document.execCommand("Copy"); // 执行浏览器复制命令
            alert("已复制好，可贴粘。");
        }
    </script>

    <button onclick="copyText()">写入粘贴板</button>
    <script>
        function copyText(text) {
            var textareaEl = document.createElement('textarea');
            textareaEl.setAttribute('readonly', 'readonly'); // 防止手机上弹出软键盘
            textareaEl.value = "text";
            document.body.appendChild(textareaEl);
            textareaEl.select();
            var res = document.execCommand('copy');
            document.body.removeChild(textareaEl);
            console.log("已经复制到剪贴板:\n" + text);
            return res;
        }
    </script>
    <hr>

    <input type="text" placeholder="测试框">
</body>

</html>

再在React写个demo

demo测试组件写了三个方法 1.复制input标签内容 2.复制p标签内容 3.写入数据进入粘贴板

import React, { Component } from 'react'
import './common.css'

export default class CopytoClipboard extends Component {
    constructor(props){
		super(props);
		this.state = {
			writevalue:'写入数据到粘贴板吧！'
		}
	}
    copyinput=()=>{
        const input = document.querySelector('#demoInput');
        input.select();
        if (document.execCommand('copy')) {
            document.execCommand('copy');
            console.log('复制成功');
        }
    }
    copyText=()=> {
        console.log('函数在运行');
        var text = document.getElementById("text").innerText;
        var input = document.getElementById("input");
        input.value = text; // 修改文本框的内容
        input.select(); // 选中文本
        document.execCommand("copy"); // 执行浏览器复制命令
        alert("复制成功");
    }
    writecontent=()=>{
        var textareaEl = document.createElement('textarea');
        textareaEl.setAttribute('readonly', 'readonly'); // 防止手机上弹出软键盘
        textareaEl.value = this.state.writevalue;
        document.body.appendChild(textareaEl);
        textareaEl.select();
        document.execCommand('copy');
        document.body.removeChild(textareaEl);
    }
    render() {
        // const btnCopy = new Clipboard('btn');
        return (
            <div>
                <h1>JavaScript复制内容到剪贴板</h1>
                <div className="copyinpiut">
                    <h3>复制input标签内容</h3>
                    <input type="text" id="demoInput" defaultValue="hello world"  />
                    <button data-clipboard-target="#demoInput" onClick={this.copyinput} >点我复制</button>
                    <hr />                   
                </div>
                <div className="copyp">
                    <h3>复制p标签内容</h3>
                    <p id="text">我把你当兄弟你却想着复制我？</p><button onClick={this.copyText}>copy</button>
                    {/* <textarea id="input">这是幕后黑手</textarea> */}
                    <textarea id="input" defaultValue="这是幕后黑手" ></textarea>
                    <hr />
                </div>
                <div className="WritePasteboard">
                    <h3>写入数据进入粘贴板</h3>
                    <button onClick={this.writecontent}>写入数据进入粘贴板</button>
                </div>
                <div className="verification">
                    <input type="text" />
                </div>
               
                <MainMenu></MainMenu>
            </div>
        )
    }
}
/*
定义和用法
appendChild() 方法可向节点的子节点列表的末尾添加新的子节点。
提示：如果文档树中已经存在了 newchild，它将从文档树中删除，然后重新插入它的新位置。
如果 newchild 是 DocumentFragment 节点，则不会直接插入它，而是把它的子节点按序
插入当前节点的 childNodes[] 数组的末尾。
你可以使用 appendChild() 方法移除元素到另外一个元素。

添加列表项:
document.getElementById("myList").appendChild(newListItem);

转移某个列表项到另外一个列表项：
var node=document.getElementById("myList2").lastChild;
document.getElementById("myList1").appendChild(node);


HTMLInputElement.setSelectionRange()
HTMLInputElement.setSelectionRange 方法用于设定<input> 或 <textarea> 元素中当前选中文本的起始和结束位置。

在较新的浏览器中，你可以通过一个可选的 selectionDirection 来指定文本选中的方向。比如通过点击和拖动从结束位置往起始位置选中一个字符串。

每次调用这个这个方法都会更新 HTMLInputElement 的 selectionStart, selectionEnd 和 selectionDirection 属性。

要注意的是，在 WHATWG forms spec 中，selectionStart, selectionEnd 属性和 setSelectionRange 方法只能应用于类型为文本、搜索、链接、电话号码和密码的输入。
Chrome 从版本 33 开始会在访问其余类型的这些属性和方法时抛出异常。例如，输入类型为数字时会抛出：“不能从'HTMLInputElement'中读取'selectionStart'属性：
输入元素的类型('number')不支持选择（Failed to read the 'selectionStart' property from 'HTMLInputElement': The input element's type ('number') does not support selection）”。
如果你希望全选输入元素中的文本，你可以使用 HTMLInputElement.select() 方法。
语法
element.setSelectionRange(selectionStart, selectionEnd [, selectionDirection]);
参数
如果 selectionEnd 小于 selectionStart，则二者都会被看作 selectionEnd。
selectionStart
被选中的第一个字符的位置索引，从0开始。如果这个值比元素的 value 长度还大，则会被看作 value 最后一个位置的索引。
selectionEnd
被选中的最后一个字符的 下一个 位置索引。如果这个值比元素的value长度还大，则会被看作value最后一个位置的索引。
selectionDirection 可选
一个表示选择方向的字符串，可能的值有：
"forward"
"backward"
"none" 默认值，表示方向未知或不相关。
https://developer.mozilla.org/zh-CN/docs/Web/API/HTMLInputElement/setSelectionRange
*/

execCommand方法

document.execCommand()方法处理Html数据时常用语法格式如下: document.execCommand(sCommand[,交互方式, 动态参数]) 其中：sCommand为指令参数（如下例中的”2D-Position”），交互方式参数如果是true的话将显示对话框，如果为false的话，则不显示对话框（下例中的”false”即表示不显示对话框），动态参数一般为一可用值或属性值（如下例中的”true”）。 document.execCommand(”2D-Position”,”false”,”true”); 调用execCommand()可以实现浏览器菜单的很多功能. 如保存文件,打开新文件,撤消、重做操作…等等. 有了这个方法,就可以很容易的实现网页中的文本编辑器. 更多详情见链接链接内容未认证是否可行，以下方法属于链接文章中的，待验证 //相当于单击文件中的打开按钮 document.execCommand(”Open”);

//将当前页面另存为 document.execCommand(”SaveAs”);

//剪贴选中的文字到剪贴板; document.execCommand(”Cut”,”false”,null);

//删除选中的文字; document.execCommand(”Delete”,”false”,null);

//改变选中区域的字体; document.execCommand(”FontName”,”false”,sFontName);

//改变选中区域的字体大小; document.execCommand(”FontSize”,”false”,sSize|iSize);

//设置前景颜色; document.execCommand(”ForeColor”,”false”,sColor);

//使绝对定位的对象可直接拖动; document.execCommand(”2D-Position”,”false”,”true”);

//使对象定位变成绝对定位; document.execCommand(”AbsolutePosition”,”false”,”true”);

//设置背景颜色; document.execCommand(”BackColor”,”false”,sColor);

//使选中区域的文字加粗; document.execCommand(”Bold”,”false”,null);

//复制选中的文字到剪贴板; document.execCommand(”Copy”,”false”,null);

//设置指定锚点为书签; document.execCommand(”CreateBookmark”,”false”,sAnchorName);

//将选中文本变成超连接,若第二个参数为true,会出现参数设置对话框; document.execCommand(”CreateLink”,”false”,sLinkURL);

//设置当前块的标签名; document.execCommand(”FormatBlock”,”false”,sTagName);

//相当于单击文件中的打开按钮 document.execCommand(”Open”);