我正在制作一个假的输入框,以便我可以应用类似于cmd _
的复古风格文本光标。
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
function copy(val){
$(".copy").html(val);
$(".vintage").css("left",val.length*1.5+"ch");}
function enterCmd(e){
if(event.keyCode==13){
$('.cmdBox').val("");
copy($('.cmdBox').val());}}
</script>
<!--So as the length of the string increases the cursor should move back and forth respectively.
But it starts out accurately and then drifts away-->
<div class="cmdBoxy" >><span class="copy" ></span>
<div class="vintage blink"></div>
</div>
<input type="text" class="cmdBox" oninput="copy($('.cmdBox').val());" id="lp" onkeydown="enterCmd($('.cmdBox'))">
<style>
.vintage{
position:relative;
background-color:white;
height:25%;
width:2%;
left:1.5%;
font-size:1em;}
.cmdBoxy{
position:relative;
top:1rem;
background-color:red;
height:1.5rem;
width:99%;}
</style>
contenteditable
呢? - Sebastian Simon1ch
。 - Paulie_D<span class="cmdInput">一些文本</span><span class="caret">_</span>
。插入符号恰好在CMD输入框之后,无需进行宽度计算。如果在这种情况下正确实现了contenteditable
,那么这就是你所需要的全部。 - Sebastian Simon<div><span contenteditable="true">这里输入文本</span><div style="height:20px;width:20px;background-color:red;"></div></div>
为什么当接收输入的 span 标签增大时它就无法工作了呢? - User not found