我正在嘗試將閃爍的元素直接移動到同一行的結果末尾。但是我閃爍的游標仍然顯示在我的 javascript 結果下，我不能把它放在結果的末尾。
我試過：flex、float left、display: inbolcks 甚至 margin div 到 div，但 id 沒有幫助。我該怎么做？我會很高興得到幫助！
function myFunction()
{
result.innerHTML = "I will not make any more boring art ";
}body
{
background-color:white;
font-family: Lucida Console Regular;
font-size:15px;
color:black;
border-width:0px;
border: 0;
}
input {
font-size:15px;
border-top-style: hidden;
border-right-style: hidden;
border-left-style: hidden;
border-bottom-style: hidden;
background-color: white;
font-family: Lucida Console Regular;
color: transparent;
display: inline-block;
}
result{
display: flex;
}
.no-outline:focus {
outline: none;
}
textarea:focus, input:focus{
outline: none;
}
.cursor {
position: relative;
float:left;
flex:1;
}
.cursor i {
flex:1;
position: absolute;
width: 1px;
height: 100%;
background-color: black;
animation-name: blink;
animation-duration: 800ms;
animation-iteration-count: infinite;
opacity: 1;
}
@keyframes blink {
from { opacity: 1; }
to { opacity: 0; }
}<input class="class" type="text" onkeydown="myFunction()" placeholder="type something" autofocus spellcheck="false" >
<div id="result"></div>
<div class="cursor">
<input type="text" class="rq-form-element" /><i></i></div>uj5u.com熱心網友回復：
您可以使用::after選擇器來創建閃爍游標。這樣，它總是位于最后一個字符之后，如下所示：
function myFunction() {
result.innerHTML = "I will not make any more boring art ";
}@import url('https://fonts.googleapis.com/css2?family=Inconsolata&family=Orbitron:wght@400;500&family=Play&display=swap');
body {
font-family: 'Inconsolata', monospace;
font-size:15px;
}
input {
border: hidden;
background-color: white;
color: transparent;
}
#result::after {
content: '';
border-right: 1px solid black;
height: 100%;
animation-name: blink;
animation-duration: 800ms;
animation-iteration-count: infinite;
}
textarea:focus, input:focus {
outline: none;
}
@keyframes blink {
from { opacity: 1; }
to { opacity: 0; }
}<input class="class" type="text" onkeydown="myFunction()" placeholder="type something" autofocus spellcheck="false" >
<div id="result"></div>
<div class="cursor">
<input type="text" class="rq-form-element" /><i></i>
</div>轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/412996.html
標籤：
上一篇：隱藏滾動并用JS實作
下一篇：使用CSS將子div與父級右對齊