JWorld@TW the best professional Java site in Taiwan
      註冊 | 登入 | 全文檢索 | 排行榜  

» JWorld@TW » Web Design 版  

按列印兼容模式列印這個話題 列印話題    把這個話題寄給朋友 寄給朋友    訂閱主題
reply to postflat modego to previous topicgo to next topic
本主題所含的標籤
作者 如何在Chrome browser 內將多個range 加到window.selection object 當中
roytsang





發文: 616
積分: 1
於 2019-01-30 14:54 user profilesend a private message to userreply to postreply to postsearch all posts byselect and copy to clipboard. 
ie only, sorry for netscape users:-)add this post to my favorite list
我想用browser 原生的copy and paste 方法來逹成copy and paste的効果,因為可以按CTRL-Z 來做rollback,
可是遇上兼容問題,以下昰我的程式碼:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Copy event to clipboard</title>
    <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
    <script>
      $( document ).ready(function() {
        $("body").on("copy",copy);
      });
      function copy(event)
      {
        var cell1,cell2;
        var endCol=getValue("endCol");
        var endRow=getValue("endRow");
        var range;
        var startCol=getValue("startCol"),startRow=getValue("startRow");
        var selection = window.getSelection();
        selection.removeAllRanges();
        for (var i=startRow;i<=endRow;i++)
        {
          range = document.createRange();
          cell1=getCell(i,startCol);
          cell2=getCell(i,endCol);
          range.setStart(cell1,0);
          range.setEnd(cell2,cell2.childNodes.length);
          selection.addRange(range);
        }
      }
      function copyContent()
      {
        document.execCommand("copy");
      }
      function getCell(rowIndex,cellIndex)
      {
        var table=document.getElementById("dataTable");
        var row=table.rows[rowIndex];
        var cell=row.cells[cellIndex];
        return cell;
      }
      function getValue(id)
      {
        var element=document.getElementById(id);
        var index=element.selectedIndex;
        return element.options[index].value;
      }
    </script>  
  </head>
  <body>
    <table border="1" id="dataTable">
      <tr>
        <td id="c11" contenteditable="true">1_1</td>
        <td id="c12" contenteditable="true">1_2</td>
        <td id="c13" contenteditable="true">1_3</td>
      </tr>
      <tr>
        <td id="c21" contenteditable="true">2_1</td>
        <td id="c22" contenteditable="true">2_2</td>
        <td id="c23" contenteditable="true">2_3</td>
      </tr>
      <tr>
        <td id="c31" contenteditable="true">3_1</td>
        <td id="c32" contenteditable="true">3_2</td>
        <td id="c33" contenteditable="true">3_3</td>
      </tr>
    </table><br>
    start column:
    <select id="startCol">
      <option value=0>1</option>
      <option value=1>2</option>
      <option value=2>3</option>
    </select>
    end column:
    <select id="endCol">
      <option value=0>1</option>
      <option value=1>2</option>
      <option value=2>3</option>
    </select>
    <br>
    start row:
    <select id="startRow">
      <option value=0>1</option>
      <option value=1>2</option>
      <option value=2>3</option>
    </select>
    end row:
    <select id="endRow">
      <option value=0>1</option>
      <option value=1>2</option>
      <option value=2>3</option>
    </select>
    <br>
    <button onclick="copyContent()">Copy</button>
    <textarea id=copiedContent>
    </textarea>
  </body>
</html>

以上程式碼,在firefox 中能做到我想要的東西,
可是在chrome 中,無論選擇幾多個row 它都只能select 到一個row,
請問有沒有work around 方法呢?


roytsang edited on 2019-01-30 17:46
reply to postreply to post
話題樹型展開
人氣 標題 作者 字數 發文時間
100 如何在Chrome browser 內將多個range 加到window.selection object 當中 roytsang 3061 2019-01-30 14:54
» JWorld@TW »  Web Design 版

reply to postflat modego to previous topicgo to next topic
  已讀文章
  新的文章
  被刪除的文章
Jump to the top of page

JWorld@TW 本站商標資訊

Powered by Powerful JuteForum® Version Jute 1.5.8