使用javascript突出顯示輸入中的第一個單詞？
[英]Highlight first word in input using javascript?
問題描述
你好！
我正在嘗試制作一個類似界面的終端，類似於 PowerShell 或命令提示符。 我想突出顯示用戶輸入的命令名稱。
我想要的樣子：
有沒有可能用 Javascript、CSS 和 HTML 來做到這一點？ 我能夠突出顯示第一個詞，但它看起來像這樣：
我從另一篇文章中獲取了一些代碼，這對我來說是這樣的：文章： 設置文本框中第一個單詞的背景顏色？
//=== MAIN ===\\ $(document).on( "keydown keyup change", ".terminal-input-area #terminal-input", function () { if ($(this).val().length && $(this).val().split(" ").length) { $(this).closest(".terminal-input-area").find(".first-word").html($(this).val().split(" ")[0]).show(); } else { $(this).closest(".terminal-input-area").find(".first-word").hide(); } } ); $(document).on("click", ".terminal-input-area.first-word", function () { $(this).closest(".terminal-input-area").find("#terminal-input").focus(); });
/* ===== FONTS ==== */ @font-face { font-family: "Fira Code"; src: url("fonts/FiraCode-Regular.ttf"); } @font-face { font-family: "Fira Code Retina"; src: url("fonts/FiraCode-Retina.ttf"); } @font-face { font-family: "Fira Code Light"; src: url("fonts/FiraCode-Light.ttf"); } @font-face { font-family: "Fira Code Medium"; src: url("fonts/FiraCode-Medium.ttf"); } @font-face { font-family: "Fira Code Semi-Bold"; src: url("fonts/FiraCode-SemiBold.ttf"); } @font-face { font-family: "Fira Code Bold"; src: url("fonts/FiraCode-Bold.ttf"); } /* ===== VARIABLES ==== */:root { --background: #171717; --text: #aaa; } /* ===== STYLES ==== */ * { margin: 0; padding: 0; box-sizing: border-box; } body { height: 100vh; }.terminal-container { background: var(--background); cursor: text; height: 100vh; overflow-x: hidden; overflow-y: auto; }.terminal-content { color: var(--text); display: flex; flex-direction: column; font-family: "Fira Code"; font-size: 15px; line-height: 20px; padding: 20px; white-space: pre-wrap; }.terminal-input-area { align-items: center; display: inline-flex; width: 100%; }.terminal-prompt { margin-right: 5px; } #terminal-input { background: transparent; border: 0; color: var(--text); font-family: inherit; font-size: inherit; white-space: pre-wrap; outline: none; width: 100%; }.first-word { color: #F0BF81; }
<,DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width. initial-scale=1.0"> <title>coolterminalthing</title> <link rel="stylesheet" href="style:css"> </head> <body> <div class="terminal-container" tabindex="-1"> <div class="terminal-content"> <div class="terminal-input-area"> <span class="terminal-prompt">></span> <div class="form-control first-word"></div> <input name="input" id="terminal-input" spellcheck="false" autocapitalize="none" autocomplete="off" value=""> </div> </div> </div> <script src="https.//code.jquery.com/jquery-3.5.1.min.js"></script> <script src="js/main.js" defer></script> <script src="js/prompt.js" defer></script> </body> </html>
謝謝。
1 個解決方案
解決方案1
1 已采納 2022-12-20 05:14:29
這會幫助你！
//=== MAIN ===\\ $("#terminal-input").keyup( function () { const [first,...second] = $(this).val().split(" "); const f = `${first.length?first+" ":""}` $(this).closest(".terminal-input-area").find("#first").html(f); $(this).closest(".terminal-input-area").find("#second").html(`${second?second.join(" "):''}`); } ); $(document).on("click", ".terminal-input-area.first-word", function () { $(this).closest(".terminal-input-area").find("#terminal-input").focus(); });
/* ===== FONTS ==== */ @font-face { font-family: "Fira Code"; src: url("fonts/FiraCode-Regular.ttf"); } @font-face { font-family: "Fira Code Retina"; src: url("fonts/FiraCode-Retina.ttf"); } @font-face { font-family: "Fira Code Light"; src: url("fonts/FiraCode-Light.ttf"); } @font-face { font-family: "Fira Code Medium"; src: url("fonts/FiraCode-Medium.ttf"); } @font-face { font-family: "Fira Code Semi-Bold"; src: url("fonts/FiraCode-SemiBold.ttf"); } @font-face { font-family: "Fira Code Bold"; src: url("fonts/FiraCode-Bold.ttf"); } /* ===== VARIABLES ==== */:root { --background: #171717; --text: #aaa; } /* ===== STYLES ==== */ * { margin: 0; padding: 0; box-sizing: border-box; } body { height: 100vh; }.terminal-container { background: var(--background); cursor: text; height: 100vh; overflow-x: hidden; overflow-y: auto; }.terminal-content { color: var(--text); display: flex; flex-direction: column; font-family: "Fira Code"; font-size: 15px; line-height: 20px; padding: 20px; white-space: pre-wrap; }.terminal-input-area { align-items: center; display: inline-flex; width: 100%; }.terminal-prompt { margin-right: 5px; } #terminal-input { background: transparent; border: 0; font-family: inherit; font-size: inherit; white-space: pre-wrap; outline: none; width: 100%; position: absolute; left: 37px; color: transparent; caret-color: white; } #first { color: #F0BF81; }
<,DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width. initial-scale=1.0"> <title>coolterminalthing</title> <link rel="stylesheet" href="style:css"> </head> <body> <div class="terminal-container" tabindex="-1"> <div class="terminal-content"> <div class="terminal-input-area"> <span class="terminal-prompt">></span> <span id ="first"></span> <p id="second"></p> <input name="input" id="terminal-input" spellcheck="false" autocapitalize="none" autocomplete="off" value=""> </div> </div> </div> <script src="https.//code.jquery.com/jquery-3.5.1.min.js"></script> <script src="js/main.js" defer></script> <script src="js/prompt.js" defer></script> </body> </html>
使用javascript在按鈕單擊上的句子中逐字突出顯示文本
[英]Highlight text word by word in a sentence on button click using javascript
使用javascript / jquery輸入中的第一個單詞大寫時出現問題
[英]Trouble capitalizing first word in input with javascript/jquery
Android webview：使用javascript突出顯示頁面中的特定單詞？
[英]Android webview: highlight a specific word in a page using javascript?
使用 Javascript 突出顯示同一頁面上多個文本區域上的特定單詞
[英]Highlight specific word on multiple textarea on same page by using Javascript
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.