Al hacer doble clic en una palabra en una oración en un cuadro de entrada de formulario HTML, se resaltará esa palabra. Quiero que cada doble clic cambie el caso de la palabra resaltada entre minúsculas y mayúsculas.
<input id="vnib" type="text" value="#ATitle#">Ejemplo: el título que se muestra en el cuadro de entrada es "El día más largo". Cuando hago doble clic en la palabra "más largo", cambiará a "Más largo".
¿Por qué esto? Necesito corregir cientos de errores de mayúsculas en una lista de 30.000 títulos y quiero ahorrarme cientos de pulsaciones de teclas. En este momento tengo que seleccionar las letras iniciales de cada palabra en mayúscula incorrecta y luego escribir las letras con el caso correcto.
Aquí hay una solución simple de HTML + JS puro.
let content = document.getElementById("content"); content.addEventListener("dblclick", changeSelectionCase); function changeSelectionCase(e) { let selection = window.getSelection(); if (selection && selection.rangeCount > 0) { let selectionRange = selection.getRangeAt(0); let startOffset = selectionRange.startOffset content.textContent = content.textContent.substring(0, startOffset) + content.textContent[startOffset].toUpperCase() + content.textContent.substring(startOffset + 1); } } <p id="content">Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempora nostrum optio suscipit cumque adipisci molestias inventore officia ea corrupti dolore alias nemo iure, beatae porro soluta quo aliquam ut facere.</p>@Commata, según sus comentarios, lo hizo más fácil. Simplemente guarde el código a continuación como un archivo HTML y ábralo con su navegador. Contiene un párrafo editable, por lo que puede copiar y pegar su texto en él. Luego haga doble clic en las palabras que desea alternar el caso de la primera letra.
<html lang="en"> <head> <meta charset="UTF-8"> <style> p:before { content: "(Paste content here)"; font-weight: bold; margin-right: 1rem; } p { margin: 2rem; padding: 2rem; } </style> </head> <body> <p contenteditable="true" id="content">Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempora nostrum optio suscipit cumque adipisci molestias inventore officia ea corrupti dolore alias nemo iure, beatae porro soluta quo aliquam ut facere.</p> </body> <script> let content = document.getElementById("content"); content.addEventListener("dblclick", changeSelectionCase); function changeSelectionCase(e) { let selection = window.getSelection(); if (selection && selection.rangeCount > 0) { let selectionRange = selection.getRangeAt(0); let startOffset = selectionRange.startOffset; let upperCase = content.textContent[startOffset].toUpperCase(); let toggledCase = upperCase === content.textContent[startOffset] ? content.textContent[startOffset].toLowerCase() : content.textContent[startOffset].toUpperCase(); content.textContent = content.textContent.substring(0, startOffset) + toggledCase + content.textContent.substring(startOffset + 1); } } </script> </html>