javascript - getSelection not working properly in Chrome - Stack Overflow

In the below code selectTextOnly() gets called by clicking on any of the cells or the div at the top via onclick.

In Chrome Everything works if I click on any of the table cells. However, when I click on the div, the function gets called but no selection gets set.

Clicking both the div and the cells works as expected in Firefox.

Why does clicking the div not select the cells in Chrome?

Example on jsFiddle

Html:

---

<div style="width: 45px; height:20px; background-color:#339900" onclick="selectTextOnly('notes')" id="test"></div>

<table id="all" class="optionEmail"  width="100%" border="0">
  <tr>
    <td id="notes" onclick="selectTextOnly('notes')">This is the notes cell</td>
  </tr>
  <td> 
  <table id="email">
  <tr>
    <td onclick="selectTextOnly('email')">This is the email cell</td>
  </tr>
  <tr>
    <td id="itinerary" onclick="selectTextOnly('itinerary')">This is the flights cell</td>
  </tr>
  <tr>
    <td onclick="selectTextOnly('all')">This is the all cell</td>
  </tr>
  </table>
  </td>
</table>

javascript:

---

function selectTextOnly(containerid) {
    if (document.selection) {
        var range = document.body.createTextRange();
        range.moveToElementText(document.getElementById(containerid));
        range.select();
    } else if (window.getSelection) {
        var range = document.createRange();
        range.selectNode(document.getElementById(containerid));
        window.getSelection().addRange(range);
    }
}

In the below code selectTextOnly() gets called by clicking on any of the cells or the div at the top via onclick.

In Chrome Everything works if I click on any of the table cells. However, when I click on the div, the function gets called but no selection gets set.

Clicking both the div and the cells works as expected in Firefox.

Why does clicking the div not select the cells in Chrome?

Example on jsFiddle

Html:

---

<div style="width: 45px; height:20px; background-color:#339900" onclick="selectTextOnly('notes')" id="test"></div>

<table id="all" class="optionEmail"  width="100%" border="0">
  <tr>
    <td id="notes" onclick="selectTextOnly('notes')">This is the notes cell</td>
  </tr>
  <td> 
  <table id="email">
  <tr>
    <td onclick="selectTextOnly('email')">This is the email cell</td>
  </tr>
  <tr>
    <td id="itinerary" onclick="selectTextOnly('itinerary')">This is the flights cell</td>
  </tr>
  <tr>
    <td onclick="selectTextOnly('all')">This is the all cell</td>
  </tr>
  </table>
  </td>
</table>

javascript:

---

function selectTextOnly(containerid) {
    if (document.selection) {
        var range = document.body.createTextRange();
        range.moveToElementText(document.getElementById(containerid));
        range.select();
    } else if (window.getSelection) {
        var range = document.createRange();
        range.selectNode(document.getElementById(containerid));
        window.getSelection().addRange(range);
    }
}

• javascript
• html-table
• getselection

Share Improve this question Follow edited Jul 23, 2018 at 9:40 Brian Tompsett - 汤莱恩 5,8937272 gold badges6161 silver badges133133 bronze badges asked Sep 19, 2013 at 6:21 Wesley SmithWesley Smith 19.6k2222 gold badges9191 silver badges134134 bronze badges 3

• It's works for me, bu you can try: selectTextOnly('email');return false; because I think that browser create own selection after yours... – Krzysiek Commented Sep 19, 2013 at 6:32
• Unfortunately, return false; had no effect. What do you mean it works for you? On that jsFiddle, when you click the green box the cells are selected? – Wesley Smith Commented Sep 19, 2013 at 6:50
• Yes, in my chrome, jsFiddle works fine. – Krzysiek Commented Sep 19, 2013 at 8:03

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 4

Try change you code into this:

function selectTextOnly(containerid) {
    var text = document.getElementById(containerid);
    if (document.body.createTextRange) {
        var range = document.body.createTextRange();
        range.moveToElementText(text);
        range.select();
    } else {
        var selection = window.getSelection();
        var range = document.createRange();
        range.selectNodeContents(text);
        selection.removeAllRanges();
        selection.addRange(range);
    } 
}

The if stament is used to check document.body.createTextRange used only for IE; the else for all other browsers.

Demo: http://jsfiddle/IrvinDominin/2K3ZT/2/