欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

Web js實(shí)現(xiàn)復(fù)制文本到粘貼板

 更新時(shí)間：2022年08月23日 10:52:48   作者：Genven_Liang  
這篇文章主要為大家詳細(xì)介紹了Web js實(shí)現(xiàn)復(fù)制文本到粘貼板，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

本文實(shí)例為大家分享了Web js實(shí)現(xiàn)復(fù)制文本到粘貼板的具體代碼，供大家參考，具體內(nèi)容如下

一、簡(jiǎn)述

記--簡(jiǎn)單用js實(shí)現(xiàn)將元素的文本內(nèi)容復(fù)制到粘貼板。

二、效果

三、代碼

<!DOCTYPE html>
<html>
? <head>
? ? <meta charset="utf-8" />
? ? <title>js復(fù)制內(nèi)容到粘貼板</title>
?? ?<script type="text/javascript">?? ?
?? ??? ?<!--隨機(jī)字符串-->
?? ??? ?var randomStr = "0123456789abcdefghijklmnopqrstuvwxyz0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZ";
?? ??? ?
?? ??? ?<!--生成隨機(jī)碼-->
?? ??? ?function genRandomCode(len){
?? ??? ??? ?
?? ??? ??? ?var randomCode = "";
?? ??? ??? ?var y = randomStr.length-1;
?? ??? ??? ?var x = 0;
?? ??? ??? ?
?? ??? ??? ?var i;
?? ??? ??? ?var index;
?? ??? ??? ?for(i=0; i<len; i++){
?? ??? ??? ??? ?<!--生成[x,y]范圍內(nèi)的隨機(jī)數(shù)-->
?? ??? ??? ??? ?index = Math.floor(Math.random()*(y+1-x)+x);
?? ??? ??? ??? ?
?? ??? ??? ??? ?<!--獲取字符串中的其中一個(gè)字符-->?? ??? ??? ??? ?
?? ??? ??? ??? ?randomCode += randomStr.charAt(index);
?? ??? ??? ?}
?? ??? ??? ?return randomCode;
?? ??? ?}
?? ??? ?
?? ??? ?<!--生成隨機(jī)碼并設(shè)置到input輸入框-->
?? ??? ?function setRandomCode(elementID, len){
?? ??? ??? ?var randomCode = genRandomCode(len);
?? ??? ??? ?var element = document.getElementById(elementID);
?? ??? ??? ?element.setAttribute("value", randomCode);
?? ??? ?}
?? ??? ?
?? ??? ?<!--復(fù)制elementID的內(nèi)容到粘貼板-->
?? ??? ?function copyElementText2Clipboard(elementID) {
?? ??? ??? ?<!--根據(jù)id拿到元素對(duì)象-->
?? ??? ??? ?var element = document.getElementById(elementID);
?? ??? ??? ?if(element == null){
?? ??? ??? ??? ?console.log("element is null, id:" + elementID);
?? ??? ??? ??? ?return;
?? ??? ??? ?}?? ??? ??? ?
?? ??? ??? ?
?? ??? ??? ?<!--獲取元素內(nèi)容文本-->
?? ??? ??? ?var content = element.innerHTML;
?? ??? ??? ?
?? ??? ??? ?<!--復(fù)制到粘貼板-->
?? ??? ??? ?if(element.tagName == "INPUT"){
?? ??? ??? ??? ?<!--如果是input就直接復(fù)制-->
?? ??? ??? ??? ?element.setSelectionRange(0, 64);<!--選擇input中的第0個(gè)字符到64個(gè)字符，也就是最多選中32個(gè)字符-->
?? ??? ??? ??? ?element.select();<!--選中input的value-->
?? ??? ??? ??? ?var isCopyOk = document.execCommand("copy");<!--將當(dāng)前選中的內(nèi)容復(fù)制到粘貼板-->
?? ??? ??? ??? ?if(isCopyOk){
?? ??? ??? ??? ??? ?alert("已復(fù)制");
?? ??? ??? ??? ?}
?? ??? ??? ?}?? ??? ??? ?
?? ??? ??? ?else
?? ??? ??? ?{
?? ??? ??? ??? ?<!--創(chuàng)建一個(gè)臨時(shí)的隱藏的input，并將它的value賦值為content，然后copy到粘貼板-->
?? ??? ??? ??? ?const input = document.createElement("input");<!--創(chuàng)建input-->
?? ??? ??? ??? ?input.setAttribute("readonly", "readonly");<!--設(shè)置為只讀-->
?? ??? ??? ??? ?input.setAttribute("value", content);<!--設(shè)置input的value-->
?? ??? ??? ??? ?document.body.appendChild(input);<!--將input添加到body-->
?? ??? ??? ??? ?input.setSelectionRange(0, 64);<!--選擇input中的第0個(gè)字符到64個(gè)字符，也就是最多選中32個(gè)字符-->
?? ??? ??? ??? ?input.select();<!--選中input的value-->
?? ??? ??? ??? ?var isCopyOk = document.execCommand("copy");<!--將當(dāng)前選中的內(nèi)容復(fù)制到粘貼板-->
?? ??? ??? ??? ?document.body.removeChild(input);<!--移除剛才臨時(shí)添加的input-->
?? ??? ??? ??? ?if(isCopyOk){
?? ??? ??? ??? ??? ?alert("已復(fù)制");
?? ??? ??? ??? ?}
?? ??? ??? ?}
?? ??? ??? ?
?? ??? ?}
?? ??? ?
?? ??? ?<!--復(fù)制eSrcID的文本到eDestID-->
?? ??? ?function copyElmText(eSrcID, eDestID) {
?? ??? ??? ?var elementSrc = document.getElementById(eSrcID);<!--獲取元素1對(duì)象-->
?? ??? ??? ?var elementDest = document.getElementById(eDestID);<!--獲取元素1對(duì)象-->
?? ??? ??? ?if(elementSrc == null){
?? ??? ??? ??? ?console.log("elementSrc:"+elementSrc+" is null.");
?? ??? ??? ??? ?return;
?? ??? ??? ?}
?? ??? ??? ?
?? ??? ??? ?if(elementDest == null){
?? ??? ??? ??? ?console.log("elementDest:"+elementDest+" is null.");
?? ??? ??? ??? ?return;
?? ??? ??? ?}
?? ??? ??? ?
?? ??? ??? ?<!--將元素2的value屬性設(shè)置為元素1的文本 elementDest.setAttribute("value", elementSrc.innerHTML);在國(guó)瓷設(shè)置后設(shè)置成功但是顯示不刷新-->?? ??? ??? ?
?? ??? ??? ?elementDest.value=elementSrc.innerHTML;
?? ??? ??? ?
?? ??? ?}
? ? </script>
? </head>
? <body>
?? ?<span>隨機(jī)碼</span>
?? ?<input type="text" id='RandomCode' name="RandomCode" value="" readonly="readonly" />
?? ?<input type='button' onclick='setRandomCode("RandomCode", "16")' title='生成隨機(jī)碼' value="生成隨機(jī)碼" />
?? ?<input type='button' onclick='copyElementText2Clipboard("RandomCode")' title='復(fù)制隨機(jī)碼到粘貼板' value="復(fù)制隨機(jī)碼" />
?? ?</br>
?? ?</br>
?? ?<span>地址</span>
?? ?<input type="text" id='Addr' name="text1" value="test">
?? ?<input type='button' onclick='copyElmText("defaultAddr", "Addr")' title='將括號(hào)內(nèi)容填充到輸入框' value="設(shè)為默認(rèn)地址" />
?? ?(<span id="defaultAddr" title="" >xxx省xxx市xxx縣</span>)
?? ?<input type='button' onclick='copyElementText2Clipboard("defaultAddr")' title='復(fù)制到粘貼板' value="復(fù)制" />
?? ?</br>
?? ?</br>
?? ?<textarea id='textarea1' rows="20" cols="50">
?? ?</textarea>
?? ?<input type='button' onclick='javascript:document.getElementById("textarea1").value=""' title='清空內(nèi)容' value="清空" />
? </body>
</html>

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

  • 小程序?qū)崿F(xiàn)密碼輸入框

    小程序?qū)崿F(xiàn)密碼輸入框

    這篇文章主要為大家詳細(xì)介紹了小程序?qū)崿F(xiàn)密碼輸入框，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
    2020-11-11
  • js判斷一個(gè)元素是否為另一個(gè)元素的子元素的代碼

    js判斷一個(gè)元素是否為另一個(gè)元素的子元素的代碼

    用js判斷一個(gè)元素是否為另一個(gè)元素的子元素，再做一些效果的時(shí)候經(jīng)常用到，特別是和鼠標(biāo)事件相關(guān)的應(yīng)用中，比如一個(gè)浮層，在鼠標(biāo)操作浮層內(nèi)元素的時(shí)候浮層顯示，當(dāng)點(diǎn)擊浮層外的元素的時(shí)候隱藏浮層
    2012-03-03
  • javascript 按回車鍵相應(yīng)按鈕提交事件

    javascript 按回車鍵相應(yīng)按鈕提交事件

    在表單提交前經(jīng)常遇到表單驗(yàn)證問題而常用的方法有以下兩種.
    2009-11-11
  • 詳解http訪問解析流程原理

    詳解http訪問解析流程原理

    這篇文章主要介紹了詳解http訪問解析流程原理的相關(guān)資料,希望通過本文能幫助到大家，讓大家理解掌握這部分內(nèi)容，需要的朋友可以參考下
    2017-10-10
  • 淺談js閉包理解

    淺談js閉包理解

    這篇文章主要介紹了對(duì)js閉包理解，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2019-03-03
  • JavaScript簡(jiǎn)寫技巧總結(jié)

    JavaScript簡(jiǎn)寫技巧總結(jié)

    這篇文章總結(jié)了JavaScript的一些簡(jiǎn)寫技巧，文中通過示例代碼介紹的非常詳細(xì)。對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
    2022-06-06
  • 使用GruntJS構(gòu)建Web程序之安裝篇

    使用GruntJS構(gòu)建Web程序之安裝篇

    Gruntjs是JavaScript項(xiàng)目的構(gòu)建工具，也是基于node的一個(gè)命令行工具。很多開源JS項(xiàng)目都是使用它搭建。如jQuery、Qunit、CanJS等。
    2014-06-06
  • 詳解JavaScript中l(wèi)ocalStorage使用要點(diǎn)

    詳解JavaScript中l(wèi)ocalStorage使用要點(diǎn)

    localStorage主要用來替代cookie，解決cookie(可參考cookie使用要點(diǎn))讀寫困難、容量有限的問題，對(duì)js localstorage的使用相關(guān)知識(shí)感興趣的朋友一起學(xué)習(xí)吧
    2016-01-01
  • 小議Javascript中的this指針

    小議Javascript中的this指針

    在全局執(zhí)行環(huán)境中使用this，標(biāo)識(shí)Global對(duì)象，在瀏覽器中就是window對(duì)象。
    2010-03-03
  • ?JavaScript?數(shù)據(jù)結(jié)構(gòu)之散列表的創(chuàng)建(2)

    ?JavaScript?數(shù)據(jù)結(jié)構(gòu)之散列表的創(chuàng)建(2)

    這篇文章主要介紹了?JavaScript?數(shù)據(jù)結(jié)構(gòu)之散列表的創(chuàng)建，主要看如何處理散列值沖突的問題，并實(shí)現(xiàn)更完美的散列表。下文詳細(xì)介紹需要的小伙伴可以參考一下
    2022-04-04

最新評(píng)論