我使用 CSS 創建了一個自定義文本游標：
.cursor {
position: relative;
}
.cursor i {
position: absolute;
width: 10px;
height: 80%;
background-color: blue;
left: 5px;
top: 10%;
animation-name: blink;
animation-duration: 1s;
animation-iteration-count: infinite;
opacity: 1;
}
@keyframes blink {
from {
opacity: 1;
}
to {
opacity: 0.5;
}
}
上述 CSS 在以下 HTML 中實作：
<div class="cursor">
<input type="text" />
<i></i>
</div>
雖然這成功地創建了一個閃爍的、矩形的和藍色的文本游標，但一旦我在輸入框中輸入文本，它就會保持在相同的位置。如何修改上面的代碼使游標移動，類似于 Mac/Linux 終端？
uj5u.com熱心網友回復：
您需要獲取輸入的值并將其放入隱藏的 div 中以獲取clientWidth。
確保為輸入和 div“掩碼”設定相同的字體系列和相同的字體大小以使其正常作業。
我添加了 3 px 以進行更正。
我使用 css css()進行左移。
let elemDiv = document.getElementById("mask"),
elemInput = document.getElementById("typing");
elemInput.oninput = function() {
elemDiv.innerText = elemInput.value;
// css version
$(".cursor i").css({"left":(elemDiv.clientWidth 3) "px"});
// debug infos
console.clear();
console.log((elemDiv.clientWidth 3) "px");
}.cursor {
position: relative;
}
.cursor i {
position: absolute;
width: 10px;
height: 80%;
background-color: blue;
left: 5px;
top: 10%;
animation-name: blink;
animation-duration: 1s;
animation-iteration-count: infinite;
opacity: 1;
}
#typing {
width:100%;
font-family:arial;
font-size:12px;
}
#mask {
font-family:arial;
font-size:12px;
width: auto;
display: inline-block;
visibility: hidden;
position: fixed;
overflow:auto;
}
@keyframes blink {
from {
opacity: 1;
}
to {
opacity: 0.5;
}
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="cursor">
<input type="text" id="typing" />
<i></i>
</div>
<div id='mask'></div>但是你也可以用animate()來做到這一點。
let elemDiv = document.getElementById("mask"),
elemInput = document.getElementById("typing");
elemInput.oninput = function() {
elemDiv.innerText = elemInput.value;
// animated version
$(".cursor i").animate({"left":(elemDiv.clientWidth 3) "px"}, "fast");
// debug infos
console.clear();
console.log((elemDiv.clientWidth 3) "px");
}.cursor {
position: relative;
}
.cursor i {
position: absolute;
width: 10px;
height: 80%;
background-color: blue;
left: 5px;
top: 10%;
animation-name: blink;
animation-duration: 1s;
animation-iteration-count: infinite;
opacity: 1;
}
#typing {
width:100%;
font-family:arial;
font-size:12px;
}
#mask {
font-family:arial;
font-size:12px;
width: auto;
display: inline-block;
visibility: hidden;
position: fixed;
overflow:auto;
}
@keyframes blink {
from {
opacity: 1;
}
to {
opacity: 0.5;
}
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="cursor">
<input type="text" id="typing" />
<i></i>
</div>
<div id='mask'></div>轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/389402.html