2011-03-24 32 views
22

Puede alguien ayudarme a conseguir este código funciona en IE favor:GetSelection() no funciona en IE

HTML:

<p>Alex Thomas</p> 
<button id="click">Click</button> 

JS

$('#click').click(function(){ 
    var range = window.getSelection().getRangeAt(0); 
    var selectionContents = range.extractContents(); 
    var span = document.createElement("span"); 
    span.style.color = "red"; 
    span.appendChild(selectionContents); 
    range.insertNode(span); 
}); 

codificado aquí : http://jsfiddle.net/WdrC2/

Gracias de antemano ...

+1

@Alex IE anterior a 9 no implementa 'getSelection()'. –

+0

¿Qué versión de IE? – Ryre

+0

El código funciona para mí en Chrome 8. Seleccioné el texto e hice clic en el botón, y el texto se volvió rojo, por lo que algo funciona. – Blender

Respuesta

22

IE antes de 9 no es compatible con window.getSelection(). Puede usar document.selection en su lugar (vea this msdn page para la descripción). Este objeto de selección tiene un método createRange() que devuelve un objeto TextRange (ver this msdn page para más detalles).

Tenga en cuenta que los objetos selection y textrange son la propia implementación de Microsofts y no cumplen con los estándares W3C. Puede leer más sobre los problemas textrange y range en www.quirksmode.org/dom/range_intro.html.

La siguiente aplicación funciona en IE:

$('#click').click(function(){ 
    var range = document.selection.createRange(); 
    range.pasteHTML("<span style='color: red'>" + range.htmlText + "</span>"); 
}); 

No es tan bonito como la otra aplicación ya que tiene que trabajar con cadenas en lugar de DOM. Hay un pequeño truco donde pegas <span id="myUniqueId"></span> como marcador de posición, y luego lo reemplazas usando el dom. Sin embargo, todavía tiene que trabajar con range.htmlText o range.text.

BTW: la implementación anterior es obviamente solo IE. Debe usar la detección de capacidad del navegador para decidir qué versión usar.

+0

Excelente respuesta, intentaré esto, gracias. – Alex

+0

¿Estás seguro de que IE9 no admite 'window.getSelection()'? http://msdn.microsoft.com/en-us/library/ie/ff975169(v=vs.85).aspx dice que sí ... – Rijk

+0

@Rijk Tienes razón, es por eso que escribí "IE * before * to 9 no es compatible con window.getSelection(). " :) –

-3

Si desea colorear "Alex Thomas" a rojo que puede hacer

HTML

<p id='txt'>Alex Thomas</p> 
<input type='button' id='btn' value='click' /> 

JS

$('#click').click(function(){ 
    $('#txt').attr('color','Red'); 
}); 
+0

Una respuesta inútil, pero gracias de todos modos. – Alex

+4

Quiere resaltar la sección resaltada de 'Alex Thomas', no todo. –

1

Prueba este de aquí: http://jsfiddle.net/6BrWe/

Es un poco de un truco y no tan bonita, pero debería funcionar en IE y otros navegadores - No he hecho un montón de pruebas del navegador cruz aunque :)

$('#click').click(function() { 
    var whatBrowser = getIt(); 
    if (whatIsIt == 'notIE' && whatBrowser) { 
     notIE(whatBrowser); 
    } 
    else if (whatIsIt == "isIE"&& whatBrowser) { 
     isIE(whatBrowser); 
    }; 
}); 

var whatIsIt = ""; 

function getIt() { 
    if (window.getSelection) { 
     whatIsIt = "notIE"; 
     return window.getSelection(); 
    } 
    else if (document.getSelection) { 
     whatIsIt = "notIE"; 
     return document.getSelection(); 
    } 
    else { 
     var selection = document.selection && document.selection.createRange(); 
     if (selection.text) { 
      whatIsIt = "isIE"; 
      return selection; 
     }; 
     return false; 
    }; 
    return false; 
}; 

function isIE(selection) { 
    if (selection) { 
     var selectionContents = selection.text; 
     if (selectionContents) { 
      selection.pasteHTML('<span class="reddy">' + selectionContents + '</span>'); 
     }; 
    }; 
}; 

function notIE(selection) { 
    var range = window.getSelection().getRangeAt(0); 
    var selectionContents = range.extractContents(); 
    var span = document.createElement("span"); 
    span.className= "reddy"; 
    span.appendChild(selectionContents); 
    range.insertNode(span); 
}; 
+0

Con todo ese JS, me pregunto por qué no has hecho un 'document.getElementById (" click "). Onclick' para la primera línea. Sin embargo, +1 para obtener una respuesta completa que utiliza detección de características. –

+0

OP tenía jQuery allí, así que no cambié esa parte –

0

para una solución crossbrowser ver esta pregunta en StackOverflow: Is there a cross-browser solution for getSelection()?

esta pregunta no es del todo un duplicado de éste, así que creo que es útil para vincular la cuestión en esta respuesta en su lugar. Hice esta respuesta comunidad wiki.