今日练习：请设计一个程序，点击按钮后自动复制文本框中的内容到剪切板上，随后贴在新文本域中。
关键词：自动获取内容、更新剪切板
先看效果：
html：
<p>单击按钮以复制输入框中的文本，然后尝试将文本（例如 ctrl+v）粘贴到不同的窗口中，以查看效果。</p>
<input type="text" placeholder="请输入内容" value="" class="myInput" style="outline:none;">
<div class="tooltip">
<button onclick="myFunction()"">
<span class=" tooltiptext" id="myTooltip">点击按钮复制</span>
复制内容提示
</button>
</div>
<p>可以粘贴到下面：</p>
<textarea></textarea>
css:
html,
body {
box-sizing: border-box;
background-image: linear-gradient(236deg, #74ebd5, #acb6e5);
}
.myInput {
margin-top: 25px;
}
.tooltip {
position: relative;
display: inline-block;
}
.tooltip .tooltiptext {
visibility: hidden;
width: 140px;
background-color: #555;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 5px;
position: absolute;
z-index: 1;
bottom: 150%;
left: 50%;
margin-left: -75px;
opacity: 0;
transition: opacity 0.3s;
}
.tooltip .tooltiptext::after {
content: "";
position: absolute;
top: 100%;
left: 50%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: #555 transparent transparent transparent;
}
.tooltip:hover .tooltiptext {
visibility: visible;
opacity: 1;
}
textarea {
/* 关闭textarea标签的右下角拖动 */
resize: none;
width: 200px;
min-height: 100px;
/* 去边框 */
border: none;
/* 去除选中后的黑框 */
outline:none;
}
到这里我们就基本完成了静态操作，现在，我们来解决3个难题：
1.如何获取 input 框内容更新到剪切板
Clipboard 接口的 writeText() 方法可以写入特定字符串到操作系统的剪切板。
一旦剪贴板的内容被更新，它就会被解析。如果调用者没有写入剪贴板的权限，则拒绝写入剪切板
- 点击后获取的文本选中方向如何指定
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() 方法。
以上解释来自：HTML DOM API - Web API 接口参考 | MDN (mozilla.org)
- textarea 自适应怎么解决
textarea 它的高度是固定的，所以在我们写入文本超过它高度的时候，就会出现一个很丑陋的滚动条，当然我们也可以拖动右下角，扩大文本域，比较麻烦，能不能自适应呢，随着我们输入删除内容，高度自适应？
很简单，直接通过js监听textarea文本的高度，然后再根据内容改变高度即可。
let textarea = document.querySelector("textarea");
textarea.addEventListener('input', e => {
textarea.style.height = '100px'
textarea.style.height = e.target.scrollHeight + 'px'
})
以上解决办法来着：textarea内容自动撑开高度，实现高度自适应 - 知乎 (zhihu.com)
没错，主打的就是一个面向百度编程，cv工程师。
这里，用到了一个# HTML DOM scrollHeight 属性，scrollHeight 属性是一个只读属性，它返回该元素的像素高度，高度包含内边距（padding），不包含外边距（margin）、边框（border），是一个整数，单位是像素 px。
完整js：
function myFunction() {
let copyText = document.querySelector(".myInput")
copyText.select();
copyText.setSelectionRange(0, 99999);
navigator.clipboard.writeText(copyText.value);
let tooltip = document.querySelector("#myTooltip");
tooltip.innerHTML = "复制内容: " + copyText.value;
}
// 监听textarea
let textarea = document.querySelector("textarea");
textarea.addEventListener('input', e => {
textarea.style.height = '100px'
textarea.style.height = e.target.scrollHeight + 'px'
})
ok，今天的学习就到这里。 仙路崎岖，磨难并不可怕，坚持终成正果！
