JavaScript 實現複製到剪貼簿
阿新 • • 發佈:2018-12-02
可編輯區域選中(input,textarea)
方法一
選中時,選中區域會有選中樣式
<p>點選複製後在右邊textarea CTRL+V看一下</p>
<input type="text" id="inputText" value="測試文字"/>
<input type="button" id="btn" value="複製"/>
<textarea rows="4"></textarea>
<script>
var btn = document.getElementById('btn');
btn.addEventListener('click', function(){
var inputText = document.getElementById('inputText');
inputText.select();//選中物件 同樣只適用於 input 或者 textarea 文字框
document.execCommand('copy', true);//瀏覽器複製命令 方法允許執行命令來操縱可編輯區域的內容。又是可編輯區域
});
</script>
setSelectionRange
只受用於一些含有value屬性的HTML控制元件,例如單行文字框、多行文字域;
<p>點選複製後在右邊textarea CTRL+V看一下</p>
<input type="text" id="inputText" value="測試文字"/>
<input type="button" id="btn" value="複製"/>
<textarea rows="4"></textarea >
<script>
var btn = document.getElementById('btn');
btn.addEventListener('click', function(){
var inputText = document.getElementById('inputText');
inputText.focus();
inputText.setSelectionRange(0,inputText.value.length);
document.execCommand('copy', true);//瀏覽器複製命令 方法允許執行命令來操縱可編輯區域的內容。又是可編輯區域
});
</script>
非文字框
動態建立input 標籤並賦值
<span id='span'>11111111111111</span>
<input type="button" id="btn" value="複製"/>
<script language="javascript">
var btn = document.getElementById('btn');
var span = document.getElementById('span').innerHTML;
btn.addEventListener('click', function(){
const input = document.createElement('input');
input.setAttribute('value', span);
input.setAttribute('readonly', 'readonly');
document.body.appendChild(input);
input.select();
let copy = document.execCommand('Copy');
if(copy){
alert('複製成功')
}
document.body.removeChild(input);
});
</script>