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 № 1Spró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/