El Atributo ONSELECT

El atributo onselect se activa cuando un usuario selecciona texto dentro de un elemento editable como input o textarea.

El atributo onselect se activa cuando un usuario selecciona texto dentro de un elemento editable como <input> o <textarea>. Es útil para crear funciones interactivas basadas en la selección de texto.

???? Sintaxis básica

<!-- En elementos de texto -->
<input 
    type="text" 
    value="Texto de ejemplo" 
    onselect="manejarSeleccion(event)"
>

<textarea onselect="manejarSeleccion(event)">
    Selecciona parte de este texto
</textarea>

Run HTML

// Método alternativo con JavaScript
document.getElementById("miInput").addEventListener("select", (event) => {
    // Lógica aquí
});

???? Características clave

Solo para elementos de texto: <input type="text">, <textarea>.
No funciona con contenido estático: No aplica a <div>, <p>, etc.
Se activa durante la selección: Mientras el usuario arrastra el mouse o usa el teclado.

???? Ejemplos prácticos

1. Mostrar texto seleccionado

<input 
    type="text" 
    value="Prueba seleccionar parte de este texto" 
    onselect="mostrarSeleccion(event)"
>
<p id="resultado"></p>

<script>
function mostrarSeleccion(event) {
    const input = event.target;
    const textoSeleccionado = input.value.substring(
        input.selectionStart,
        input.selectionEnd
    );
    
    document.getElementById("resultado").textContent = 
        `Selección: "${textoSeleccionado}"`;
}
</script>

Run HTML

2. Contador de caracteres seleccionados

<textarea onselect="contarSeleccion(event)"></textarea>
<p>Caracteres seleccionados: <span id="contador">0</span></p>

<script>
function contarSeleccion(event) {
    const textarea = event.target;
    const longitud = textarea.selectionEnd - textarea.selectionStart;
    document.getElementById("contador").textContent = longitud;
}
</script>

Run HTML

???? Casos de uso avanzados

1. Resaltar texto seleccionado

<textarea id="editor" onselect="resaltarSeleccion(event)"></textarea>
<div id="previsualizacion"></div>

<script>
function resaltarSeleccion(event) {
    const texto = event.target.value;
    const inicio = event.target.selectionStart;
    const fin = event.target.selectionEnd;
    
    const textoResaltado = 
        texto.substring(0, inicio) +
        `<mark>${texto.substring(inicio, fin)}</mark>` +
        texto.substring(fin);
    
    document.getElementById("previsualizacion").innerHTML = textoResaltado;
}
</script>

<style>
#previsualizacion {
    border: 1px solid #ccc;
    padding: 10px;
    margin-top: 10px;
}
</style>

Run HTML

2. Sistema de búsqueda en tiempo real

<input 
    type="text" 
    id="buscador" 
    placeholder="Buscar..." 
    onselect="buscarEnDocumento(event)"
>
<div id="contenido">
    <p>Este es un texto de ejemplo donde puedes seleccionar palabras para buscarlas.</p>
</div>

<script>
function buscarEnDocumento(event) {
    const textoSeleccionado = event.target.value.substring(
        event.target.selectionStart,
        event.target.selectionEnd
    );
    
    const contenido = document.getElementById("contenido").innerHTML;
    const regex = new RegExp(`(${textoSeleccionado})`, "gi");
    
    document.getElementById("contenido").innerHTML = 
        contenido.replace(regex, "<mark>$1</mark>");
}
</script>

Run HTML

⚠️ Consideraciones importantes

1. Diferencias con otros eventos

Evento	Descripción
`onselect`	Selección de texto en campos de entrada
`onclick`	Clic en cualquier elemento
`onchange`	Cambio de valor en elementos de formulario

2. Compatibilidad

Navegador	Soporte
Chrome	✅ 1+
Firefox	✅ 6+
Safari	✅ 3+
Edge	✅ 12+

3. Limitaciones

No funciona con elementos no editables (<div contenteditable> requiere enfoque diferente).
La selección programática no activa el evento en todos los navegadores.

???? Trucos y buenas prácticas

Obtener la selección actual:

function obtenerSeleccion(input) {
    return {
        inicio: input.selectionStart,
        fin: input.selectionEnd,
        texto: input.value.substring(input.selectionStart, input.selectionEnd)
    };
}

Selección programática:

// Seleccionar desde el carácter 5 al 10
const input = document.getElementById("miInput");
input.setSelectionRange(5, 10);

Manejar múltiples elementos:

document.querySelectorAll("input[type='text'], textarea").forEach(elemento => {
    elemento.addEventListener("select", manejarSeleccionGlobal);
});

???? Conclusión

El atributo onselect es útil para:

Crear herramientas de edición interactivas.
Implementar funciones de búsqueda en tiempo real.
Desarrollar aplicaciones de análisis de texto.
Mejorar la accesibilidad con feedback visual.

Ejemplo final avanzado (Editor de texto con estadísticas):

<textarea id="editor" onselect="actualizarEstadisticas(event)"></textarea>
<div class="estadisticas">
    <p>Caracteres seleccionados: <span id="chars">0</span></p>
    <p>Palabras seleccionadas: <span id="words">0</span></p>
</div>

<script>
function actualizarEstadisticas(event) {
    const seleccion = obtenerSeleccion(event.target);
    const palabras = seleccion.texto.split(/s+/).filter(Boolean).length;
    
    document.getElementById("chars").textContent = seleccion.texto.length;
    document.getElementById("words").textContent = palabras;
}
</script>

<style>
.estadisticas {
    background: #f8f9fa;
    padding: 10px;
    margin-top: 10px;
    border-radius: 4px;
}
</style>

Run HTML

Con este conocimiento, podrás crear aplicaciones web más interactivas y sensibles a las acciones del usuario. ¡Experimenta y adapta estos ejemplos a tus necesidades! ✨????