El Atributo ONCUT

El atributo oncut es un evento de JavaScript que se activa cuando el usuario corta contenido (usando Ctrl + X, el menú contextual o gestos equivalentes) desde un elemento HTML editable o seleccionable. Es útil para controlar, modificar o rastrear acciones de cortar texto, especialmente en formularios y aplicaciones interactivas.

¿Dónde se aplica?

Funciona en elementos que permiten la edición o selección de texto:

• <input> (text, email, password, etc.).

• <textarea>.

• Elementos con contenteditable="true".

Sintaxis básica

Como atributo HTML:

<input type="text" oncut="manejarCorte(event)">

Con JavaScript (recomendado):

elemento.addEventListener('cut', function(e) {
  e.preventDefault();
  // Acciones personalizadas
});

Ejemplos prácticos

Ejemplo 1: Mostrar alerta al cortar

<input 
  type="text" 
  value="Intenta cortar este texto"
  oncut="alert('¡Texto cortado!')"
>

Ejemplo 2: Registrar actividad de corte

<textarea id="editor" oncut="registrarCorte(event)">
  Texto editable...
</textarea>
<p id="contador">Cortes: 0</p>

<script>
  let cortes = 0;
  function registrarCorte(e) {
    cortes++;
    document.getElementById('contador').textContent = `Cortes: ${cortes}`;
  }
</script>

Ejemplo 3: Modificar el texto cortado

<div contenteditable="true" oncut="agregarMarca(event)">
  Corta este texto para ver una marca de tiempo.
</div>

<script>
  function agregarMarca(e) {
    const textoSeleccionado = window.getSelection().toString();
    const textoModificado = `${textoSeleccionado} [Cortado: ${new Date().toLocaleTimeString()}]`;
    
    // Reemplazar el texto en el portapapeles
    e.clipboardData.setData('text/plain', textoModificado);
    e.preventDefault(); // Evita el corte original
    
    // Eliminar el texto seleccionado manualmente
    document.execCommand('delete');
  }
</script>

Diferencias clave: oncut vs eventos similares

Evento	Descripción
oncut	Al cortar (copiar + eliminar texto).
oncopy	Al copiar texto sin eliminarlo.
onpaste	Al pegar texto desde el portapapeles.

Mejores prácticas

Acceso al portapapeles:

Usa e.clipboardData para leer o modificar el texto cortado:

elemento.addEventListener('cut', (e) => {
  const textoOriginal = window.getSelection().toString();
  e.clipboardData.setData('text/plain', textoOriginal.toUpperCase());
  e.preventDefault();
});

Validar contenido cortado:

elemento.addEventListener('cut', (e) => {
  const texto = window.getSelection().toString();
  if (texto.includes('@')) {
    alert("¡No se pueden cortar correos electrónicos!");
    e.preventDefault();
  }
});

Accesibilidad:

Si restringes acciones de corte, proporciona un mensaje claro:

e.preventDefault();
mostrarTooltip("Esta acción está restringida");

Casos avanzados

Integración con autoguardado:

<textarea id="notas" oncut="guardarBorrador()">Notas importantes...</textarea>

<script>
  function guardarBorrador() {
    localStorage.setItem('borrador', document.getElementById('notas').value);
  }
</script>

Sincronización con API de portapapeles:

elemento.addEventListener('cut', async (e) => {
  e.preventDefault();
  const texto = window.getSelection().toString();
  
  // Guardar en el portapapeles del sistema
  await navigator.clipboard.writeText(texto);
  
  // Eliminar el texto seleccionado
  document.execCommand('delete');
});

Errores comunes

<!-- MAL: Usar en elementos no editables -->
<p oncut="...">Texto normal</p> <!-- No funciona sin contenteditable -->

<!-- CONFUSIÓN: Olvidar e.preventDefault() -->
<input type="text" oncut="modificarTexto(event)">
<!-- El texto original se cortará igualmente -->

<!-- BLOQUEAR SIN FEEDBACK -->
<script>
  elemento.oncut = (e) => e.preventDefault(); // Usuario confundido
</script>

Compatibilidad

Navegador	Soporte	Notas
Chrome	✅ Todas versiones
Firefox	✅ Todas versiones
Safari	✅ Sí
Edge	✅ Sí
Móviles	✅ Sí (iOS/Android)	Gestos táctiles pueden variar

Cómo eliminar el evento

// Para atributo HTML:
elemento.oncut = null;

// Para addEventListener:
elemento.removeEventListener('cut', miFuncion);

Conclusión

El atributo oncut es útil para:

• Modificar o validar el texto cortado.
• Rastrear acciones del usuario en aplicaciones.
• Integrar funcionalidades avanzadas con el portapapeles.

Recuerda:

1. Usa e.preventDefault() para anular el comportamiento predeterminado.
2. Respeta la experiencia del usuario – evita restricciones innecesarias.
3. Prueba en todos los navegadores para garantizar compatibilidad.

¡Ahora puedes controlar y mejorar la interacción de "cortar" en tus proyectos web!