在前端开发中，我们通常需要处理用户上传的文件。然而，在上传文件时，许多用户会遇到一个问题：当他们想要复制其中的内容时，却无法选择复制的文本。这是因为浏览器默认情况下不支持让用户选择和复制文件内容。在本篇文章中，我将介绍如何让文件输入框支持文本复制。
输入框类型
在HTML中，我们可以使用<input>标签创建文件上传输入框。这个标签有一个type属性，支持以下几种类型：
- text
- password
- radio
- checkbox
- submit
- reset
- button
- file
- hidden
- image
- url
- number
- range
- date
- month
- week
- time
- datetime-local
- search
- color
其中，我们需要使用file类型来创建文件上传输入框。
<input type="file" name="file">
隐藏默认样式
默认情况下，浏览器会对<input type="file">标签应用一些特殊的样式，例如文件选择框的边框、背景色等等。这些样式可能对于设计师来说很棒，但它们也会影响用户体验。为了隐藏这些默认样式，我们需要使用CSS。
input[type="file"] {
opacity: 0;
position: absolute;
pointer-events: none;
}在上面的代码中，我们将opacity设置为0，使得输入框完全透明。然后，我们使用了绝对定位和指针事件来确保用户点击的是我们自己创建的按钮，而不是浏览器默认的选择按钮。
自定义样式
现在我们需要创建一个自定义的按钮，让用户可以点击它来选择文件并复制其中的内容。我们可以使用<label>标签来创建一个与文件上传输入框关联的自定义按钮。
<label for="fileInput"> <span>选择文件</span> </label> <input type="file" id="fileInput" name="file">
在这里，我们将自定义按钮包装在<label>标签中，并使用for属性将其与输入框关联起来。当用户点击自定义按钮时，它就会自动触发上传文件输入框。
接下来，我们要为自定义按钮添加样式，使其看起来更像一个按钮。
label {
display: inline-block;
padding: 6px 12px;
background-color: #f2f2f2;
border: 1px solid #ccc;
border-radius: 4px;
cursor: pointer;
}在这段CSS代码中，我们设置了一些基本的按钮样式，例如背景颜色、边框等。我们还为cursor属性设置了pointer，以表明这是一个可点击的按钮。
复制文件内容
现在，我们已经创建了一个自定义按钮，并将其关联到文件上传输入框上。但是，当用户选择文件并上传后，他们仍然无法复制文件的内容。为了让用户可以复制文件内容，我们需要使用JavaScript。
const fileInput = document.getElementById('fileInput');
const clipboard = navigator.clipboard;
fileInput.addEventListener('change', async () => {
const file = fileInput.files[0];
const text = await file.text();
await clipboard.writeText(text);
});在这个JavaScript代码中，我们首先获取了文件上传输入框。我们还使用了新的navigator.clipboardAPI，它使得我们可以访问剪贴板，并将文件内容写入其中。当用户选择文件并上传后，我们会读取文件内容，并将其写入剪贴板中。现在，用户就可以在任何地方粘贴文件的内容了！
结论
在本文
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/24982