3

Подскажите, как при фокусе на элементе

<textarea> 

в месте нахождения курсора, вместо вертикальной мигающей линии было бы горизонтальное мигающее подчеркивание, как в командной строке.

1
  • Хм.. На textarea::selection нельзя применить анимацию, значит только скриптом менять текст по таймеру. Ну и в любом случае вставлять подчёркивание и выделять его надо. Остальное примерно так: ru.stackoverflow.com/a/687901/178988
    – Qwertiy
    19 мар 2021 в 8:45

1 ответ 1

1

Как вариант:

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>

2
  • Странно смотрится и странно работает. Выделение не работает.
    – Qwertiy
    19 мар 2021 в 9:25
  • a<b - не работает. Стрелка влево - валится.
    – Qwertiy
    19 мар 2021 в 10:07

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.