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

• 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

1 Answer 1

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/