/ / getSelection nie działa poprawnie w Chrome - javascript, html-table, getselection

getSelection nie działa poprawnie w Chrome - javascript, html-table, getselection

W poniższym kodzie selectTextOnly() jest wywoływana przez kliknięcie dowolnej komórki lub elementu div u góry za pomocą onclick.

W Chrome Wszystko działa, jeśli kliknę dowolną komórkę tabeli. Jednak po kliknięciu elementu div funkcja zostaje wywołana, ale żaden wybór nie zostaje ustawiony.

Kliknięcie zarówno elementu div, jak i komórek działa zgodnie z oczekiwaniami w przeglądarce Firefox.

Dlaczego kliknięcie elementu div nie powoduje zaznaczenia komórek w przeglądarce Chrome?

Przykład na 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);
}
}

Odpowiedzi:

2 dla odpowiedzi № 1

Spróbuj zmienić swój kod na ten:

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);
}
}

Do sprawdzenia używany jest stament document.body.createTextRange używany tylko dla IE; pozostałe dla wszystkich innych przeglądarek.

Próbny: http://jsfiddle.net/IrvinDominin/2K3ZT/2/