Подскажите, как при фокусе на элементе
<textarea>
в месте нахождения курсора, вместо вертикальной мигающей линии было бы горизонтальное мигающее подчеркивание, как в командной строке.
Stack Overflow на русском — это сайт вопросов и ответов для программистов. Присоединяйтесь! Регистрация займёт не больше минуты.
Присоединиться к сообществуКак вариант:
window.addEventListener('load', function() {
let writer = document.querySelector('.writer');
let setter = document.querySelector('.setter');
let cursor = document.querySelector('.cursor');
let terminal = document.querySelector('.terminal');
cursor.style.left = "0px";
function write() {
writer.innerHTML = this.value.replace(/\n/g, "<br />");
}
function move(event) {
let e = event || window.event;
let count = this.value.length;
let keycode = e.keyCode || e.which;
if (keycode == 37 && parseInt(cursor.style.left) >= (0 - ((count - 1) * 10))) {
cursor.style.left = parseInt(cursor.style.left) - 10 + "px";
} else if (keycode == 39 && (parseInt(cursor.style.left) + 10) <= 0) {
cursor.style.left = parseInt(cursor.style.left) + 10 + "px";
}
}
setter.addEventListener('keydown', move);
setter.addEventListener('keyup', write);
setter.addEventListener('keypress', write);
terminal.addEventListener('click', () => setter.focus());
});
body {
margin: 0px;
padding: 0px;
height: 99%;
}
.setter {
left: -1000px;
position: absolute;
}
.cursor {
font-size: 12px;
background-color: black;
color: blue;
position: relative;
opacity: 0.5;
height: 2px;
width: 12px;
overflow: hidden;
text-indent: -5px;
display: inline-block;
text-decoration: blink;
animation: blinker 1s linear infinite;
}
.terminal {
margin: 8px;
cursor: text;
height: 500px;
overflow: auto;
}
.writer {
font-family: cursor, courier;
font-weight: bold;
}
.getter {
margin: 5px;
}
@keyframes blinker {
50% { opacity: 0.0; }
}
<div class="terminal">
<textarea type="text" class="setter"></textarea>
<div id="getter">
<span class="writer"></span><b class="cursor"></b>
</div>
</div>
textarea::selection
нельзя применить анимацию, значит только скриптом менять текст по таймеру. Ну и в любом случае вставлять подчёркивание и выделять его надо. Остальное примерно так: ru.stackoverflow.com/a/687901/178988