html - formulario - ¿Es posible seleccionar contenido generado en css?
editar formulario contact form (3)
Esta pregunta ya tiene una respuesta aquí:
Digamos que tengo marcado:
<div data-generated="world!">Hello </div>
..con CSS:
div:after {
content: attr(data-generated);
}
Esto produce el texto: ¡Hola mundo! - FIDDLE
div:after {
content: attr(data-generated);
}
<div data-generated="world!">Hello </div>
PERO...
Si intento seleccionar / Copiar el texto, solo se puede seleccionar la parte ''hola''.
¿Hay alguna manera de seleccionar el texto generado por css?
NÓTESE BIEN:
1) He examinado las especificaciones ( here y here ) con respecto al contenido generado y no he visto ninguna referencia a este problema.
La especificación here y here parece decir que el contenido generado debe ser seleccionable
El contenido generado debe poder buscarse, seleccionarse y estar disponible para las tecnologías de asistencia.
2) Si la respuesta a esta pregunta es ''no, no es posible'', por favor, haga un enlace a una fuente creíble que lo indique.
En lugar de seleccionar el contenido generado, puedes simular esto con algún javascript.
Me tropecé con este blog de David Walsh , donde proporciona código que recupera el contenido generado.
Usando eso, puede agregar el contenido generado al contenido regular para simular la selección del contenido generado, luego puede configurar el contenido generado con display:none para que no aparezca dos veces. Me gusta esto:
String.prototype.unquoted = function() {
return this.replace(/(^[''"])|([''"]$)/g, '''')
}
var element = document.getElementById(''div1'');
var content = window.getComputedStyle(
element, '':after''
).getPropertyValue(''content'');
element.innerHTML = element.innerHTML + content.unquoted();
console.log(content.unquoted());
div:after {
content: attr(data-generated);
display: none;
}
<div id="div1" data-generated=" world!">Hello</div>
Entonces, ¿por qué querrías hacer algo así?
Bueno, probablemente nunca querrá hacer esto, pero dejé un largo comentario sobre la pregunta que explica una restricción particular que una vez tuve, donde esto podría haber sido una solución.
NB: Me doy cuenta de que esta ''solución'' realmente no selecciona el contenido generado en sí, pero decidí publicar esta respuesta en caso de que alguien por ahí alguna vez necesitara una solución.
No almacene contenido que deba ser visible y accesible en data atributos de data , ya que la tecnología de asistencia puede no tener acceso a ellos.
Compruebe estos enlaces:
http://www.karlgroves.com/2013/08/26/css-generated-content-is-not-content/ https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Using_data_attributes
No, no puedes.
Consulte Selección y manipulación de pseudo-elementos CSS como :: before y :: after using jQuery . Para repetir lo que se describe allí, el contenido generado no es parte del DOM.
En las palabras de la especificación CSS2.1 ,
El contenido generado no altera el árbol de documentos.
El contenido generado solo existe en el mundo visual del motor de renderizado. La selección se trata de seleccionar partes del DOM. El contenido generado no está en el DOM, por lo tanto, no se puede seleccionar. Por el mismo motivo, los contadores generados o las viñetas de elementos de lista no se pueden seleccionar.