优化 javascript 从输入字段复制数据的 onclick 函数

Question

我有一个 javascript 函数，可以将文本输入字段中的信息复制到剪贴板，该函数运行良好。但是，我需要这个函数能够处理多个输入或将多个 onclick 事件连接到同一个输入字段。

基本上，我正在寻找优化以下内容的方法。

function h1Function() {
var copyText1 = document.getElementById("h1Input");
copyText1.select();
document.execCommand("copy");
alert("Copied the text: " + copyText1.value);
}
function h2Function() {
var copyText2 = document.getElementById("h2Input");
copyText2.select();
document.execCommand("copy");
alert("Copied the text: " + copyText2.value);
}

连接到以下 html 个字段。

<h1><a href="#" onclick="h1Function()">abcdefg123456ABCDEFG - h1</a></h1>
<input type="text" value="<div class='h1 highlight'>Din tekst her</div>" 
id="h1Input" />
<h2><a href="#" onclick="h2Function()">abcdefg123456ABCDEFG - h2</a></h2>
<input type="text" value="<div class='h2 highlight'>Din tekst her</div>" 
id="h2Input" />

我们将不胜感激任何和所有优化提示

Answer 1

只需将 id 作为参数传递给函数即可。

function h1Function(id) {
  var copyText1 = document.getElementById(id);
  copyText1.select();
  document.execCommand("copy");
  alert("Copied the text: " + copyText1.value);
}

<h1>
  <a href="#" onclick="h1Function('input1')">abcdefg123456ABCDEFG - h1</a>
</h1>
<input type="text" id="input1" value="<div class='h1 highlight'>Din tekst her</div>" 
id="h1Input" />
<h2>
  <a href="#" onclick="h1Function('input2')">abcdefg123456ABCDEFG - h2</a>
</h2>
<input type="text" id="input2" value="<div class='h2 highlight'>Din tekst her</div>" 
id="h2Input" />

优化 javascript 从输入字段复制数据的 onclick 函数

Optimising javascript onclick function that copies data from input field

html

javascript

clipboard

copy

input-field