Блог

Главная - Вопросы по программированию - Как сделать так, чтобы курсор div мигал? реагировать

Как сделать так, чтобы курсор div мигал? реагировать

#javascript #css #reactjs

Вопрос:

У меня есть свой код ниже, и он нормально работает. Но я хочу, чтобы div-outputDisplay имел мигающий курсор, такой же, как текстовая область, управляемый мигающий курсор, в котором я могу включать или выключать. Есть ли какие-либо возможности для этого?

 <div id="outputDisplay">{inputedData}</div>

<SampleKeyboard>
    <div>
        <button onClick={() => setInputedData(inputedData   'A')}>A<button>
        <button onClick={() => setInputedData(inputedData   'B')}>B<button>
    </div>
</SampleKeyboard>

мигающий курсор:

введите описание изображения здесь

Комментарии:

1. contenteditable="true" caniuse.com/contenteditable

Ответ №1:

Вы можете указать интервал для мигающего курсора в конце состояния. И наложите на него css-анимацию, чтобы выглядело так, будто он мигает.

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

Вот код:

 <div>
    {inputedData}
    <span className={`${style.blinking} ${blinkingHidden ? style.hidden : ''}`}>|</span>
</div>

И css модульный

 .hidden {
    display: none;
}
.cursorBlink{
    font-weight:100;
    font-size:30px; //follow the content font-size
    color:black;
    width:5px;
    overflow:hidden;
    animation:blink 1s steps(5,start) infinite
}
@keyframes blink{from,to{color:transparent}50%{color:#000}}
@-moz-keyframes blink{from,to{color:transparent}50%{color:#000}}
@-webkit-keyframes blink{from,to{color:transparent}50%{color:#000}}
@-ms-keyframes blink{from,to{color:transparent}50%{color:#000}}
@-o-keyframes blink{from,to{color:transparent}50%{color:#000}}

Примечание: Это грязное решение, но оно лучше всего подходит для вашей проблемы. Вы можете перейти к другому ответу 🙂

Метки: ,