javascript - teclas - seleccionar todo en word 2016
Seleccionar texto en un elemento(similar a resaltar con el mouse) (16)
Javascript simple
function selectText(node) {
node = document.getElementById(node);
if (document.body.createTextRange) {
const range = document.body.createTextRange();
range.moveToElementText(node);
range.select();
} else if (window.getSelection) {
const selection = window.getSelection();
const range = document.createRange();
range.selectNodeContents(node);
selection.removeAllRanges();
selection.addRange(range);
} else {
console.warn("Could not select text in node: Unsupported browser.");
}
}
const clickable = document.querySelector(''.click-me'');
clickable.addEventListener(''click'', () => selectText(''target''));
<div id="target"><p>Some text goes here!</p><p>Moar text!</p></div>
<p class="click-me">Click me!</p>
Aquí hay una demostración de trabajo . Para aquellos de ustedes que buscan un plugin de jQuery, yo también hice uno de esos .
jQuery (respuesta original)
He encontrado una solución para esto en este hilo . Pude modificar la información proporcionada y mezclarla con un poco de jQuery para crear una función totalmente increíble para seleccionar el texto en cualquier elemento, independientemente del navegador:
function SelectText(element) {
var text = document.getElementById(element);
if ($.browser.msie) {
var range = document.body.createTextRange();
range.moveToElementText(text);
range.select();
} else if ($.browser.mozilla || $.browser.opera) {
var selection = window.getSelection();
var range = document.createRange();
range.selectNodeContents(text);
selection.removeAllRanges();
selection.addRange(range);
} else if ($.browser.safari) {
var selection = window.getSelection();
selection.setBaseAndExtent(text, 0, text, 1);
}
}
Me gustaría que los usuarios hagan clic en un enlace, luego selecciona el texto HTML en otro elemento ( no una entrada).
Por "seleccionar" me refiero a la misma forma en que seleccionaría el texto arrastrando el mouse sobre él. Esto ha sido importante para la investigación porque todos hablan de "seleccionar" o "resaltar" en otros términos.
es posible? Mi código hasta ahora:
HTML:
<a href="javascript:" onclick="SelectText(''xhtml-code'')">Select Code</a>
<code id="xhtml-code">Some Code here </code>
JS:
function SelectText(element) {
$("#" + element).select();
}
¿Me estoy perdiendo algo descaradamente obvio?
Aquí hay otra solución simple para obtener el texto seleccionado en forma de cadena, puede usar esta cadena fácilmente para agregar un elemento div a su código:
var text = '''';
if (window.getSelection) {
text = window.getSelection();
} else if (document.getSelection) {
text = document.getSelection();
} else if (document.selection) {
text = document.selection.createRange().text;
}
text = text.toString();
Aquí hay una versión sin rastreador de navegador y sin dependencia de jQuery:
function selectElementText(el, win) {
win = win || window;
var doc = win.document, sel, range;
if (win.getSelection && doc.createRange) {
sel = win.getSelection();
range = doc.createRange();
range.selectNodeContents(el);
sel.removeAllRanges();
sel.addRange(range);
} else if (doc.body.createTextRange) {
range = doc.body.createTextRange();
range.moveToElementText(el);
range.select();
}
}
selectElementText(document.getElementById("someElement"));
selectElementText(elementInIframe, iframe.contentWindow);
Eche un vistazo al objeto Selection (motor Gecko) y al objeto TextRange (motor Trident). No sé sobre ningún marco de JavaScript que tenga implementado este soporte para varios navegadores, pero tampoco lo busqué, así que Es posible que incluso jQuery lo tenga.
El código de Jason no se puede usar para elementos dentro de un iframe (ya que el alcance difiere de la ventana y el documento). Arreglé ese problema y lo modifiqué para ser utilizado como cualquier otro complemento de jQuery (chainable):
Ejemplo 1: Selección de todo el texto dentro de las etiquetas <código> con un solo clic y agregue la clase "seleccionada":
$(function() {
$("code").click(function() {
$(this).selText().addClass("selected");
});
});
Ejemplo 2: al hacer clic en el botón, seleccione un elemento dentro de un iframe:
$(function() {
$("button").click(function() {
$("iframe").contents().find("#selectme").selText();
});
});
Nota: recuerde que el origen del iframe debe residir en el mismo dominio para evitar errores de seguridad.
jQuery Plugin:
jQuery.fn.selText = function() {
var obj = this[0];
if ($.browser.msie) {
var range = obj.offsetParent.createTextRange();
range.moveToElementText(obj);
range.select();
} else if ($.browser.mozilla || $.browser.opera) {
var selection = obj.ownerDocument.defaultView.getSelection();
var range = obj.ownerDocument.createRange();
range.selectNodeContents(obj);
selection.removeAllRanges();
selection.addRange(range);
} else if ($.browser.safari) {
var selection = obj.ownerDocument.defaultView.getSelection();
selection.setBaseAndExtent(obj, 0, obj, 1);
}
return this;
}
Lo probé en IE8, Firefox, Opera, Safari, Chrome (versiones actuales). No estoy seguro de si funciona en versiones anteriores de IE (sinceramente no me importa).
El método de Tim funciona perfectamente para mi caso: seleccionar el texto en un div tanto para IE como para FF después de reemplazar la siguiente declaración:
range.moveToElementText(text);
con lo siguiente:
range.moveToElementText(el);
El texto en el div se selecciona haciendo clic en él con la siguiente función jQuery:
$(function () {
$("#divFoo").click(function () {
selectElementText(document.getElementById("divFoo"));
})
});
Estaba buscando lo mismo, mi solución fue esta:
$(''#el-id'').focus().select();
Este thread contiene cosas realmente maravillosas. Pero no puedo hacerlo bien en esta página usando FF 3.5b99 + FireBug debido a un "Error de seguridad".
Yipee !! Pude seleccionar toda la barra lateral derecha con este código, espero que te ayude a:
var r = document.createRange();
var w=document.getElementById("sidebar");
r.selectNodeContents(w);
var sel=window.getSelection();
sel.removeAllRanges();
sel.addRange(r);
PD: - No pude usar objetos devueltos por selectores de jQuery como
var w=$("div.welove",$("div.sidebar"));
//this throws **security exception**
r.selectNodeContents(w);
Me gustó la respuesta de lepe, excepto por algunas cosas:
- Explorador del navegador, jQuery o no no es óptimo
- SECO
- No funciona en IE8 si el padre de obj no admite createTextRange
- La capacidad de Chrome para utilizar setBaseAndExtent debe aprovecharse (IMO)
- No seleccionará el texto que abarca varios elementos DOM (elementos dentro del elemento "seleccionado"). En otras palabras, si llama a selText en un div que contiene varios elementos de intervalo, no seleccionará el texto de cada uno de esos elementos. Eso fue un factor decisivo para mí, YMMV.
Esto es lo que se me ocurrió, con un asentimiento a la respuesta de lepe para inspirarme. Estoy seguro de que seré ridiculizado ya que esto es quizás un poco torpe (y en realidad podría ser más, pero estoy divagando). Pero funciona y evita el rastreo del navegador y ese es el punto .
selectText:function(){
var range,
selection,
obj = this[0],
type = {
func:''function'',
obj:''object''
},
// Convenience
is = function(type, o){
return typeof o === type;
};
if(is(type.obj, obj.ownerDocument)
&& is(type.obj, obj.ownerDocument.defaultView)
&& is(type.func, obj.ownerDocument.defaultView.getSelection)){
selection = obj.ownerDocument.defaultView.getSelection();
if(is(type.func, selection.setBaseAndExtent)){
// Chrome, Safari - nice and easy
selection.setBaseAndExtent(obj, 0, obj, $(obj).contents().size());
}
else if(is(type.func, obj.ownerDocument.createRange)){
range = obj.ownerDocument.createRange();
if(is(type.func, range.selectNodeContents)
&& is(type.func, selection.removeAllRanges)
&& is(type.func, selection.addRange)){
// Mozilla
range.selectNodeContents(obj);
selection.removeAllRanges();
selection.addRange(range);
}
}
}
else if(is(type.obj, document.body) && is(type.obj, document.body.createTextRange)) {
range = document.body.createTextRange();
if(is(type.obj, range.moveToElementText) && is(type.obj, range.select)){
// IE most likely
range.moveToElementText(obj);
range.select();
}
}
// Chainable
return this;
}
Eso es. Parte de lo que ves es para facilitar la lectura y / o conveniencia. Probado en Mac en las últimas versiones de Opera, Safari, Chrome, Firefox e IE. También probado en IE8. Además, normalmente solo declaro variables si / cuando sea necesario dentro de los bloques de código, pero jslint sugirió que todas se declaren arriba. Ok jslint
Editar Olvidé incluir cómo vincular esto con el código de la operación:
function SelectText(element) {
$("#" + element).selectText();
}
Aclamaciones
Mi caso de uso particular fue la selección de un rango de texto dentro de un elemento de intervalo editable, que, por lo que pude ver, no se describe en ninguna de las respuestas aquí.
La principal diferencia es que debe pasar un nodo de tipo Text al objeto Range , como se describe en la documentación de Range.setStart () :
Si el startNode es un nodo de tipo Text, Comment o CDATASection , startOffset es el número de caracteres desde el inicio de startNode. Para otros tipos de Nodos, startOffset es el número de nodos secundarios entre el inicio de startNode.
El nodo de Text es el primer nodo secundario de un elemento span, por lo tanto, para obtenerlo, acceda a childNodes[0] del elemento span. El resto es el mismo que en la mayoría de las otras respuestas.
Aquí un ejemplo de código:
var startIndex = 1;
var endIndex = 5;
var element = document.getElementById("spanId");
var textNode = element.childNodes[0];
var range = document.createRange();
range.setStart(textNode, startIndex);
range.setEnd(textNode, endIndex);
var selection = window.getSelection();
selection.removeAllRanges();
selection.addRange(range);
Otra documentación relevante:
Range
Selection
Document.createRange()
Window.getSelection()
Para cualquier etiqueta, se puede seleccionar todo el texto dentro de esa etiqueta mediante este código corto y simple. Resaltará toda el área de la etiqueta con color amarillo y seleccionará el texto dentro de ella con un solo clic.
document.onclick = function(event) {
var range, selection;
event.target.style.backgroundColor = ''yellow'';
selection = window.getSelection();
range = document.createRange();
range.selectNodeContents(event.target);
selection.removeAllRanges();
selection.addRange(range);
};
Puede utilizar la siguiente función para seleccionar el contenido de cualquier elemento:
jQuery.fn.selectText = function(){
this.find(''input'').each(function() {
if($(this).prev().length == 0 || !$(this).prev().hasClass(''p_copy'')) {
$(''<p class="p_copy" style="position: absolute; z-index: -1;"></p>'').insertBefore($(this));
}
$(this).prev().html($(this).val());
});
var doc = document;
var element = this[0];
console.log(this, element);
if (doc.body.createTextRange) {
var range = document.body.createTextRange();
range.moveToElementText(element);
range.select();
} else if (window.getSelection) {
var selection = window.getSelection();
var range = document.createRange();
range.selectNodeContents(element);
selection.removeAllRanges();
selection.addRange(range);
}
};
Esta función se puede llamar de la siguiente manera:
$(''#selectme'').selectText();
Se agregó jQuery.browser.webkit a "else if" para Chrome. No se pudo hacer funcionar esto en Chrome 23.
Realice este script a continuación para seleccionar el contenido en una etiqueta <pre> que tiene la class="code" .
jQuery( document ).ready(function() {
jQuery(''pre.code'').attr(''title'', ''Click to select all'');
jQuery( ''#divFoo'' ).click( function() {
var refNode = jQuery( this )[0];
if ( jQuery.browser.msie ) {
var range = document.body.createTextRange();
range.moveToElementText( refNode );
range.select();
} else if ( jQuery.browser.mozilla || jQuery.browser.opera || jQuery.browser.webkit ) {
var selection = refNode.ownerDocument.defaultView.getSelection();
console.log(selection);
var range = refNode.ownerDocument.createRange();
range.selectNodeContents( refNode );
selection.removeAllRanges();
selection.addRange( range );
} else if ( jQuery.browser.safari ) {
var selection = refNode.ownerDocument.defaultView.getSelection();
selection.setBaseAndExtent( refNode, 0, refNode, 1 );
}
} );
} );
Según la documentación de jQuery de select() :
Activar el evento de selección de cada elemento coincidente. Esto hace que todas las funciones que se han vinculado a ese evento de selección se ejecuten, y llama a la acción de selección predeterminada del navegador en los elementos correspondientes.
Hay una explicación de por qué jQuery select() no funcionará en este caso.
Una versión actualizada que funciona en chrome:
function SelectText(element) {
var doc = document;
var text = doc.getElementById(element);
if (doc.body.createTextRange) { // ms
var range = doc.body.createTextRange();
range.moveToElementText(text);
range.select();
} else if (window.getSelection) {
var selection = window.getSelection();
var range = doc.createRange();
range.selectNodeContents(text);
selection.removeAllRanges();
selection.addRange(range);
}
}
$(function() {
$(''p'').click(function() {
SelectText("selectme");
});
});
lepe - Eso funciona muy bien para mi gracias! Puse su código en un archivo de complemento, luego lo usé junto con cada declaración para que pueda tener varias etiquetas previas y múltiples enlaces "Seleccionar todo" en una página y selecciona el pre correcto para resaltar:
<script type="text/javascript" src="../js/jquery.selecttext.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$(".selectText").each(function(indx) {
$(this).click(function() {
$(''pre'').eq(indx).selText().addClass("selected");
return false;
});
});
});