Estoy trabajando en un sitio que recopila frases famosas. El texto de la cita es un enlace para hacer otra cosa [...] Pero también quiero que el usuario pueda seleccionar y copiar el texto de la cita.Hacer texto en enlace seleccionable con CSS
Pero en casi todos los navegadores el usuario no puede seleccionar fácilmente texto en Enlaces.
¿Es posible anular esto en CSS y hacer que el usuario pueda seleccionar el texto?
No, pero no debe tener bloques de texto masivos en un enlace; lo ideal es que el enlace sea de una o dos palabras, no un párrafo completo.
No puede. Sin embargo, puede hacer que un elemento parezca un enlace, pero use JS para manejar realmente la parte del "enlace".
jQuery:
$(".q").click(function() {
window.location.href=$(this).attr('data-link');
});
HTML:
<span data-link="link.html" class="q">text here</span>
CSS (para darle el cursor "mano")
.q {
cursor: pointer;
}
me acaba de mantener el cita simplemente envíe un mensaje de texto (sin enlace) y luego agregue un enlace más pequeño al final para obtener más información o lo que sea.
esto solo funciona si selecciona el enlace completo, o desde la mitad hacia un extremo. Si selecciona una frase en el medio, activará windows.location –
Además, si usa javascript para implementar la funcionalidad de enlace en texto normal, crea un problema importante de accesibilidad para personas con lectores de pantalla o personas que tienen javascript deshabilitado en sus navegadores (por política corporativa o por razones de seguridad.) –
@ForteL., buena captura. Roddy: sí. Como dije, no lo haría de esta manera, solo ofreciendo una posible solución. – sachleen
Esto no es realmente un trabajo para CSS, ya que esta es la funcionalidad, no la prestación. Y es un tema difícil, porque se supone que hacer clic en un enlace significa seguir el enlace, y romperlo crearía un problema importante de usabilidad.
El mejor enfoque es evitar hacer enlaces de citas y usar enlaces por separado junto con ellos. Por ejemplo, los créditos debajo de una cita, o el nombre del recurso citado en los créditos, serían un enlace natural. Y si quiere un clic para "hacer otra cosa", entonces quizás deba usar botones, no enlaces, asociados con las citas.
No puedo asegurarlo sin ver su sitio en acción, pero sospecho que el problema es que su etiqueta de enlace contiene más que solo el presupuesto.
Si el enlace muestra como "Ser o no ser - esa es la pregunta", entonces seleccionarlo debería ser lo mismo que seleccionar cualquier otra pregunta. Si el enlace es "Aquí hay una gran cita: 'Ser o no ser, esa es la pregunta. ¡Haga clic aquí para hacer otra cosa!" entonces no podrán seleccionar el texto en el medio, que es todo lo que van a querer.
Asegúrese de que el texto de su enlace sea solo el texto que desea seleccionar, y coloque todo lo demás fuera de las etiquetas, y todo irá bien.
Creo que OP quiere permitir que sus usuarios seleccionen * cualquier parte * de la cotización. –
En Firefox, puede seleccionar partes de los hipervínculos presionando la tecla Alt y luego seleccionando como de costumbre con el mouse. Entonces, una opción es implementar algo similar usando jQuery: si se presiona la tecla Alt (o la tecla que asigne) y el puntero del mouse se encuentra sobre el enlace, deshabilite el enlace. Cuando se suelta la llave, habilita el enlace. Por supuesto, debería decirles a sus usuarios cómo hacer la selección.
Aparentemente esto también funciona en Chrome. ¡Gracias por el consejo! – cvsguimaraes
Este es un método que se me ocurrió.
Utiliza una etiqueta <span> en lugar de <a>, pero se comporta como un enlace normal con algunas bonificaciones. Cuando se pasa el texto, hay un tiempo de espera de 500 milisegundos que cambiará el cursor al cursor de selección de texto. Al hacer clic y arrastrar el texto no se activa una acción de clic, sin embargo, al hacer doble clic en el texto (para seleccionar palabras enteras) aún se activa el evento de clic. Esto podría mejorarse, pero funciona bien y podría usarse en producción.
Otra posibilidad para hacer esto aún mejor sería cuando se ejecuta el tiempo de espera, sino que también muestra un pequeño icono del portapapeles en la parte superior derecha del botón que pueden hacer clic para copiar el texto a su portapapeles. Cuando .mouseout() del botón ocultaría este icono del portapapeles.
Además, otra característica podría ser borrar la selección de texto cuando el mouse deja el botón. (Clear Text Selection with JavaScript)
HTML
<span data-href="javascript:alert('This is the click action.');" class="link selectable">
<span>[email protected]</span>
</span>
CSS
.link {
font: 16px/0 Tahoma, sans-serif;
padding: 15px 30px;
border: 1px solid #0079be;
border-radius: 4px;
color: #0079be;
cursor: pointer;
}
.link:hover {
color: #fff;
background: #0079be;
}
.link.selectable > span {
display: inline-block;
}
.link.selectable.selecting > span {
cursor: text;
}
JavaScript
$('.link.selectable > span').hover(
function() {
var selectableTimeout = setTimeout(
function(elem) {
$(elem).parent().addClass('selecting');
},
500, this
);
$(this).data('selectableTimeout', selectableTimeout);
},
function() {
clearTimeout($(this).data('selectableTimeout'));
$(this).parent().removeClass('selecting');
}
);
$('.link.selectable').mousedown(
function(e) {
$(this).data('mouseX', e.pageX);
$(this).data('mouseY', e.pageY);
}
);
$('.link.selectable').mouseup(
function(e) {
var mouseX = $(this).data('mouseX');
var mouseY = $(this).data('mouseY');
if (mouseX && mouseY && mouseX === e.pageX && mouseY === e.pageY) {
window.location.href = $(this).attr('data-href');
}
}
);
etiqueta Put anclaje dentro de una etiqueta de párrafo y será seleccionable, así como hacer clic, como esto
<p><a href="#">Click Me</a></p>
simple y fácil.
Creo que primero debes averiguar cómo te imaginas que funciona. ¿Cómo llegar al enlace si hacer clic en él no te lleva a ninguna parte? ¿Cómo seleccionarías el texto si no puedes hacer clic en él? –