js實現的點選複製選中文字程式碼例項
在實際應用中,有時候我們要複製的僅僅是選中的文字,比如選中一段文字,點選一個按鈕就將選中的文字複製到某一個地方,下面就是一段這樣的程式碼例項,希望能夠給需要的朋友帶來一定的幫助。
程式碼例項如下:
[HTML] 純文字檢視 複製程式碼<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>元素的複製</title> <style type="text/css"> body{font-size:18px} p{border-style:none} .p1 { background-color:#FFFFFF; margin-top:60px; margin-bottom:3px; margin-left:200px; } .p2 { background-color:#FFFFFF; margin-top:2px; margin-bottom:3px; margin-left:150px; } .p3 { background-color:#FFFFFF; margin-top:1px; margin-bottom:3px; position:absolute; left:550px; top:60px } .p4 { background-color:#FFFFFF; margin-top:1px; margin-bottom:3px; position:absolute; left:500px; top:85px } .p5 { background-color:#FFFFFF; margin-top:1px; margin-bottom:3px; position:absolute; left:380px; top:190px } </style> <script type='text/javascript'> function getPositions() { var el=document.getElementById('shaixuan'); var startPosition=0;//所選文字的開始位置 var endPosition=0;//所選文字的結束位置 if(document.selection) { //IE var range = document.selection.createRange();//建立範圍物件 var drange = range.duplicate();//克隆物件 drange.moveToElementText(el); //複製範圍 drange.setEndPoint('EndToEnd', range); startPosition = drange.text.length - range.text.length; endPosition = startPosition + range.text.length; } else if(window.getSelection){ //Firefox,Chrome,Safari etc startPosition = el.selectionStart; endPosition = el.selectionEnd; } return { "start":startPosition, "end":endPosition } } function getshaixuan() { var position=getPositions(); var start=position.start;//開始位置 var end=position.end;//結束位置 var text=document.getElementById('shaixuan').value; var selectText=text.substr(start,(end-start));//textarea中,選中的文字 //alert(selectText); var textBox1 = document.getElementById("canjia"); textBox1.innerText=textBox1.value+selectText; } window.onload=function(){ var bt=document.getElementById("bt"); bt.onclick=function(){getshaixuan();} } </script> </head> <body> <p class="p1">篩選名單</p> <textarea id="shaixuan" name="check" class="p2"></textarea> <div class="p3">參加名單</div> <textarea id="canjia" name="canjia" class="p4"></textarea> <input type="button" value="內容複製" id="bt" class="p5"/> </body> </html>
在左邊的文字框填寫文字之後,選中指定的文字,點選按鈕就可以複製到右邊的文字框。
相關文章
- JavaScript 點選複製選中文字程式碼例項JavaScript
- js實現的獲取選中文字程式碼例項JS
- js點選文字框選中文字效果程式碼例項JS
- JS如何實現點選複製功能,JS點選複製文字JS
- js獲取選中文字程式碼例項JS
- 點選按鈕複製連結程式碼例項
- js獲取選中文字值的例項程式碼JS
- js點選div實現閃爍效果程式碼例項JS
- 點選按鈕複製文字框文字程式碼例項
- js 實現點選複製內容JS
- js實現的垂直選項卡效果程式碼例項JS
- js實現的可以通用的選項卡程式碼例項JS
- 點選按鈕拷貝複製元素內文字程式碼例項
- 點選實現顯示密碼效果程式碼例項密碼
- 點選實現隱藏元素本身程式碼例項
- 點選實現元素的漸隱或者漸現程式碼例項
- js模擬點選連結程式碼例項JS
- ajax實現的點選數目加1程式碼例項
- jQuery模擬實現滑鼠點選事件程式碼例項jQuery事件
- jQuery實現的tab選項卡程式碼例項jQuery
- jquery實現的選項卡效果例項程式碼jQuery
- js複製連結並且選中文字JS
- 原生js實現的物件複製和擴充套件程式碼例項JS物件套件
- 防止表單提交按鈕重複點選現象程式碼例項
- 手機網站禁止複製、選中文字程式碼網站
- 阻止點選回車實現的表單提交程式碼例項
- js點選平滑定位到指定元素程式碼例項JS
- js模擬實現select下拉選單程式碼例項JS
- 純css實現的tab選項卡程式碼例項CSS
- 點選回車實現表單提交效果程式碼例項
- 純css實現點選連結無效程式碼例項CSS
- 選中文字框文字觸發事件程式碼例項事件
- js選項卡簡單程式碼例項JS
- 原生js tab選項卡程式碼例項JS
- 點選方向鍵實現文字框焦點切換程式碼例項
- jQuery實現的選項卡的巢狀程式碼例項jQuery巢狀
- 點選左右箭頭可以移動選項例項程式碼
- jquery.idTabs實現的選項卡程式碼例項jQuery