Replace Blinking Text Cursor with Custom Char

Replace blinking text cursor with custom char

If you were hoping this would be easy, the bad news is that there simply isn't a quick and simple way to do this -- the text cursor is not something you can just change with a couple of lines of javascript or CSS.

If you really want to do this, you're going to need to write your own entire text input system in javascript -- display the cursor yourself, wait for key presses, print them to the screen, handle anything like word-wrapping manually.... it's a fair bit of work.

Fortunately, others have already done this work and made it available to share, so I suggest your best starting point would be to take a look at some existing examples and see how they've done it.

Here's one I found with a quick bit of googling: http://terminal.jcubic.pl/. There are plenty of others you could try as well though.

Hope that helps.

change cursor from block or rectangle to line?

You're in replace mode. Press the Insert key on your keyboard to switch back to insert mode. Many applications that handle text have this in common.

How to move custom text cursor when typing in input box?

You need to get value of your input and put it inside a hidden div to get the clientWidth.

Make sure that you set the same font family and the same font size for your input and the div "mask" to make it work correctly.

I added +3 px to make a correction.

---

I used css css() for the left move.

let elemDiv = document.getElementById("mask"),
  elemInput = document.getElementById("typing");

elemInput.oninput = function() {
  elemDiv.innerText = elemInput.value;
  
  // css version
  $(".cursor i").css({"left":(elemDiv.clientWidth + 3) + "px"});
  
  // debug infos 
  console.clear();
  console.log((elemDiv.clientWidth + 3) + "px");
}

.cursor {
  position: relative;
}
.cursor i {
  position: absolute;
  width: 10px;
  height: 80%;
  background-color: blue;
  left: 5px;
  top: 10%;
  animation-name: blink;
  animation-duration: 1s;
  animation-iteration-count: infinite;
  opacity: 1;
}

#typing {
  width:100%;
  font-family:arial;
  font-size:12px;
}

#mask {
  font-family:arial;
  font-size:12px;
  width: auto;
  display: inline-block;
  visibility: hidden;
  position: fixed;
  overflow:auto;
}

@keyframes blink {
  from {
    opacity: 1;
  }
  to {
    opacity: 0.5;
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="cursor">
<input type="text" id="typing" />
<i></i>
</div>
<div id='mask'></div>

How to change blinking cursor/caret in textarea

The easy solution, but working only if you use a monospaced font (like Courier or Courier New) - don't set textarea's color to transparent, but on keyDown fill it with spaces insead of any other characters:

on keyDown ↓
get the character ↓
put it in the underlaying <pre> tag ↓
put a space in the textarea

You would need to get the caret position to place the space and the character in appropriate place, but there are scripts for that already (this one for example).

I can create a fiddle/plunkr example for you if you want.

The thing is getting harder if the font you are using is not monospaced, but sice you are using a <pre> tag you should be ok with this one (if anyone is curious I can describe the non-trivial, time consuming and definately not-IE-compatible approach for not monospaced fonts I came up with).

EDIT:
Actually you can also get the caret position from the transparent textarea and move a 1px-wide black div to the correct position (for not monospaced fonts). You can also blink it using CSS animations or Javascript.

Input cursor that is blinking

Try this solution

<div class="cursor">
<input type="text" class="rq-form-element" />
<i></i>
</div>

CSS

.cursor {
    position: relative;
}
.cursor i {
    position: absolute;
    width: 1px;
    height: 80%;
    background-color: gray;
    left: 5px;
    top: 10%;
    animation-name: blink;
    animation-duration: 800ms;
    animation-iteration-count: infinite;
    opacity: 1;
}

.cursor input:focus + i {
    display: none;
}

@keyframes blink {
    from { opacity: 1; }
    to { opacity: 0; }
}

Live demo - https://jsfiddle.net/dygxxb7n/

---

Related Topics