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

时间:2019-03-04 14:14:07

标签: javascript html5 copy clipboard input-field

我有一个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" />

任何和所有优化技巧将不胜感激

1 个答案:

答案 0 :(得分: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" />