✍ 📁 🙈 🙉 🙊 : document body appendChild

<h3>onclick copy to clipboard</h3>
<div id="Mid">
<input class="Input" value="width"  >  
<input class="Input" value="height"   >  
<input class="Input" value="length"  >  
<input class="Input" value="nobn"  >  
<input class="Input" value="span"  >

</div>
<br>
<div id="ok">copy to clipboard </div>

<br>
<pre> 執行 document.execCommand('copy') 就可以將當前<r>選取範圍</r>複製到剪貼簿。

<ol><li><<?>div id="Mid">
<li><<?>input class="Input" value="width"    >  
<li><<?>input class="Input" value="height"   >  
<li><<?>input class="Input" value="select"   >  
<li><<?>input class="Input" value="center"   >  
<li><<?>input class="Input" value="button"   >  
<li><<?>input class="Input" value="children" >  
<li><<?>input class="Input" value="length"   >  
<li><<?>input class="Input" value="alert()"  >  
<li><<?>input class="Input" value="nobn"     >  
<li><<?>/div>
<li><<?>br>
<li><<?>div id="ok">copy to clipboard <<?>/div>

<li><<?>script>
<li> var Input=document.getElementsByClassName("Input");
<li> for(x=0 ; x < Input.length ;x++){ 
<li>    Input[x].style.width=((Input[x].value.length+1)*8)+'px';
<li>    Input[x].title=Input[x].value+" onclick copy to clipboard";
<li>    Input[x].readOnly = true;}
 
<li>  Mid.addEventListener('click', function(e){ 
<li>     e.target.select() ;
<li>     document.execCommand('copy') ;

<li>     navigator.clipboard.readText().then(function(text){
<li>     ok.innerHTML=text+" copy to clipboard ";  });
<li> })
<li> <<?>/script>
</ol></pre>

Input { cursor:pointer;
        background-color:inherit;
        font-size: 18px ; 
        border: none}

#DP { width: 250px;
      margin: auto;
      border: 3px solid #73AD21;}

#ok { width:500px;
      margin: auto;
      text-align: center;    }
r {color:red}
pre ,div ,ol { font-size: 20px ;}
 h3 { text-align: center;
     font-size: 30px;
     font-weight: bold;
     text-shadow: 10px 6px 10px grey;
     color: blue; }
</style>

<h3>navigator.clipboard.writeText(copyText)<br>
navigator.clipboard.readText()</h3>

<input type="text" id="inTxT" value="123456" />
<button onclick="COPY()" >COPY to clipboard </button>
<div id="DP">剪貼簿中的文本內容</div>

navigator.clipboard.readText().then(text => {
      DP.innerHTML ="剪貼簿中的文本內容 = " + text   })
}
</script>

<pre> 
    navigator.clipboard.writeText("copyText")
    將文字 copyText 複製到剪貼簿。

navigator.clipboard.readText().then(text => {
    DP.innerHTML ="剪貼簿中的文本內容 = " + text   })

<ol><li><<?>input type="text" id="inTxT" value="123456" />
<li><<?>button onclick="COPY()" >COPY to clipboard <<?>/button>
<li><<?>div id="DP">剪貼簿中的文本內容<<?>/div>
<li>
<li><<?>script>
<li>function COPY(){
<li>      navigator.clipboard.writeText(inTxT.value);
<li>
<li>      navigator.clipboard.readText().then(text => {
<li>      DP.innerHTML ="剪貼簿中的文本內容 = " + text   })
<li>}
<li><<?>/script>
</pre>

pre , input , button {font-size: 20px;}
 h3 { text-align: center;
     font-size: 30px;
     font-weight: bold;
     text-shadow: 10px 6px 10px grey;
     color: blue; }
</style>

Edit

#ccs #HTML #blogger #document body appendChild #document.execCommand('copy') #onclick copy to clipboard #appendChild #copy #addEventListener

✍ 📁 🙈 🙉 🙊

window Resize

html 測試左入右出

html 測試上入下出

html 測試單入單出

html 測試左單右單