[英]How to keep a custom cursor from shifting letters?
我為div制作了一個自定義CSS光標。 我試圖讓它像其他任何標准光標一樣顯示。 它可以正常工作99％，但是當我在字母之間移動時，光標會移動其他字母。 我相信絕對定位可以解決此問題，但我提出的任何建議似乎都行不通。 任何幫助，將不勝感激。
$("#next-btn").click(function() { var text = $("#text").text(); console.log(text); var n = text.indexOf("|"); text = text.replace("|", ""); text = text.slice(0, n + 1) + '<span id="cursor">|</span>' + text.slice(n + 1); $("#text").replaceWith('<span id="text">' + text + '</span>'); });
#text { desplay: inline; font-size: 1.8em; letter-spacing: .05em; } #start, #end, #cursor { padding: 0; margin: 0; } #cursor { -webkit-animation: blink 1.5s infinite; animation: blink 1.5s infinite; font-weight: bold; font-size: 1.2em; } @-webkit-keyframes blink { 0%, 49.9%, 100% { opacity: 0; } 50%, 99.9% { opacity: 1; } }
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>demo</title> <script src="https://code.jquery.com/jquery-1.10.2.js"></script> </head> <body> <div> <span id="text">H<span id="cursor">|</span>ello world</span> </div> <p> <button id="next-btn">Next</button> </p> </body> </html>
最好的解決方案可能是使用字母間距和邊距。 使用“ position：absolute”可能需要一些額外的CSS，但是可以消除沿字符串的移動。
（根據Roko C. Buljan的建議進行編輯，謝謝改進）
letter-spacing: -1em;
margin: 0 4px 0 -4px;
只需使用
position:absolute;
margin:-4px
在#cursor元素上。 這會將其從文檔流中刪除。 從評論更新，很好。
也許像這樣：
letter-spacing: -10px;
在#cursor上？
$("#next-btn").click(function() { var text = $("#text").text(); console.log(text); var n = text.indexOf("|"); text = text.replace("|", ""); text = text.slice(0, n + 1) + '<span id="cursor">|</span>' + text.slice(n + 1); $("#text").replaceWith('<span id="text">' + text + '</span>'); });
#text { desplay: inline; font-size: 1.8em; letter-spacing: .05em; } #start, #end, #cursor { padding: 0; margin: 0; margin-left:-6px; position:absolute; width:9px; overflow:hidden; } #cursor { -webkit-animation: blink 1.5s infinite; animation: blink 1.5s infinite; font-weight: bold; font-size: 1.2em; } @-webkit-keyframes blink { 0%, 49.9%, 100% { opacity: 0; } 50%, 99.9% { opacity: 1; } }
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>demo</title> <script src="https://code.jquery.com/jquery-1.10.2.js"></script> </head> <body> <div> <span id="text">H<span id="cursor">|</span>ello world</span> </div> <p> <button id="next-btn">Next</button> </p> </body> </html>
我將對光標采取另一種方法：使用transparent左邊框，該邊框會被動畫間歇性地black 。 這需要首先將文本拆分為用.cursor包裹的字符，然后將.cursor類應用於適當的字符：
var cursor = 0; $('#text').html( '<span class="cursor">' + $('#text').text().split('').join('</span><span>') + '</span>'); $('#next-btn').on('click', function () { var $characters = $('#text').children(); var cursorIndex = $characters.filter('.cursor').index(); if (cursorIndex == -1) $characters.eq(0).addClass('cursor'); else $characters.removeClass('cursor').eq(cursorIndex + 1).addClass('cursor'); });
#text { desplay: inline; font-size: 1.8em; letter-spacing: .005em; } #text span { border-left: .1em solid transparent; } #text span.cursor { -webkit-animation: blink 1.5s infinite; animation: blink 1.5s infinite; } @-webkit-keyframes blink { 0%, 49.9%, 100% { border-color: black; } 50%, 99.9% { border-color: transparent; } }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script> <div> <span id="text">Hello world</span> </div> <p> <button id="next-btn">Next</button> </p>
在jQuery Masked Input中輸入按鍵時，如何防止現有值向右移動？
[英]How do I keep existing values from shifting to the right when entering keypresses into a jQuery Masked Input?
如何在Vanilla JS中的特定字符之前保留字符串中的所有字母？
[英]How do I keep all the letters from a string BEFORE a specific character in Vanilla JS?
如何防止光標/插入符號在輸入文本元素內移動？
[英]How do I keep my cursor/caret from moving inside of an input text element?
防止容器div在縮小時將最后一個內容div移動到下一行
[英]keep container div from shifting last content div to the next line on zoom out
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.