在 HTML 表單輸入框中的句子中雙擊一個單詞將突出顯示該單詞。我希望每次雙擊都能在小寫和大寫之間切換突出顯示的單詞的大小寫。
<input id="vnib" type="text" value="#ATitle#">
示例：輸入框中顯示的標題為“最長的一天”。當我雙擊“最長”這個詞時，它會變成“最長”。
為什么這個？我需要糾正 30,000 個標題串列中的數百個大寫錯誤，并希望節省數百個按鍵。現在我必須選擇每個大寫錯誤的單詞的首字母，然后輸入大小寫正確的字母。
uj5u.com熱心網友回復：
這是一個簡單的 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 檔案并使用瀏覽器打開即可。它包含一個可編輯的段落，因此您可以在其上復制/粘貼您的文本。然后雙擊要切換第一個字母的大小寫的單詞。
<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>
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/429454.html
標籤：javascript jQuery 形式 场地 冷融合-11