如何通过双击切换 HTML 表单输入框中显示的句子中单个单词的大小写？

Question

在 HTML 表单输入框中双击句子中的单词将突出显示该单词。我希望每次双击都能在小写和大写之间切换突出显示的单词的大小写。

    <input id="vnib" type="text" value="#ATitle#">

例子：输入框显示的标题是“最长的一天”。当我双击“最长”一词时，它将变为“最长”。

这是为什么？我需要更正 30,000 个标题列表中的数百个大写错误，并希望节省数百次按键操作。现在我必须 select 每个大写错误的单词的首字母，然后输入大小写正确的字母。

Answer 1

这是一个简单的 HTML + 纯 JS 解决方案。

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，根据您的评论，它变得更容易了。只需将以下代码保存为 HTML 文件并使用浏览器打开它。它包含一个可编辑的段落，因此您可以 copy/paste 您的文字。然后双击要切换首字母大小写的单词。

<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>

如何通过双击切换 HTML 表单输入框中显示的句子中单个单词的大小写？

How to toggle the case of individual words in sentences displayed in HTML form input boxes by double clicking them?

javascript

forms

jquery

field

coldfusion-11