Hide textfield blinking caret

Question

I have a text input in my HTML. Is there a way to hide the blinking text caret when the input gets focus?

I am open to doing this with JavaScript or CSS.

Allover

Have you tried setting style='cursor: default'? I'm confused what you're talking about with a 'blinking' text cursor, none of my cursors blink. – Banking

@animuson: that is for the mouse cursor that displays when the mouse is over the text input, whereas OP is asking about the blinking text cursor, aka the caret. – Pantagruel

@BoltClock's a Unicorn: Ah, the text position. I believe that's called a caret though, not a cursor. – Banking

@Banking It'd be nice if everybody called it a caret to avoid confusion. But the distinction you made is not how it's used. I hear cursor maybe even more often than caret. From dictionary.com: Computers. a movable, sometimes blinking, symbol that indicates the position on a CRT or other type of display where the next character entered from the keyboard will appear, or where user action is needed, as in the correction of an erroneous character already displayed. – Iconolatry

X11 has a mouse pointer and text cursor. MS-Windows has a mouse cursor and a text caret. That's what's confusing. I prefer the X11 naming convention. It was also used by Apple and the Amiga. – Hereinbefore

Have a look at this, you will get your solution. #45738897 – Carty

Answer 1

Try this:

$(document).ready(
  function() {
    $("textarea").addClass("-real-textarea");
    $(".textarea-wrapper").append("<textarea class=\"hidden\"></textarea>");
    $(".textarea-wrapper textarea.hidden").keyup(
      function() {
        $(".textarea-wrapper textarea.-real-textarea").val($(this).val());
      }
    );
    $(".textarea-wrapper textarea.-real-textarea").focus(
      function() {
        $(this).parent().find("textarea.hidden").focus();
      }
    );
  }
);

.textarea-wrapper {
  position: relative;
}

.textarea-wrapper textarea {
  background-color: white;
}

.textarea-wrapper,
.textarea-wrapper textarea {
  width: 500px;
  height: 500px;
}

.textarea-wrapper textarea.hidden {
  color: white;
  opacity: 0.00;
  filter: alpha(opacity=00);
  position: absolute;
  top: 0px;
  left: 0px;
}

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<div class="textarea-wrapper">
  <textarea></textarea>
</div>

The idea is to create a second, invisible <textarea> over/on-top-of the real one. The user is typing in the invisible one but the text doesn't appear (nor the caret/cursor) as it is invisible! You then use JavaScript to assign its value to the visible one.

But it doesn't seem to work in IE8 :'( the caret is still visible even though the opacity is cranked up to 11.

But it works in Firefox... ?

Baronage

If you play with background colors and opacity you can get it to kind of work in IE... but then the background has to be gray as opposed to white :( – Baronage

I had similar problem, but I needed only the focus/blur events, so I used a simple checkbox :) – Ullrich

Why don't you just use the onKeyPress event to assign the value to the textarea? – Mongoose

Instead of this, you should write pointer-events: none; CSS property. – Carty

How would that work for users who navigate using the keyboard, @ShrirangKadale? Then someone could use tab to give focus to the wrong text area. Try it here: jsfiddle.net/xpo3fqLn/1 - type into the text box, then use shift+tab to shift focus to the real text box, the cursor comes back, and the two text areas get out-of-sync. – Baronage

Answer 2

The basic idea is, that the cursor's color is the same as the text's color. So the first thing you do is make the text transparent, thus taking the cursor away with it. Then you can make the text visible again with a text shadow.

Use this link to see it live in jsfiddle.

input[type="text"]{
    color : transparent;
    text-shadow : 0 0 0 #000;
}
input[type="text"]:focus{
    outline : none;
}

Update:

Known to not work in iOS 8 and IE 11

---

Another idea of my is a bit more hacky and requires javascript.

HTML and CSS part:

You make 2 input fields and position one exactly on top of the another with z-index, etc. Then you make the top input field completely transparent, no focus, no color, and alike. You need to set the visible, lower input to disabled, so that it only shows the content of the above input, but not actually works.

Javascript part:

After all the above you sync the two inputs. On keypress or on change you copy the contents of the higher input to the lower.

Summing all the above: you type in an invisible input, and that will be sent to the backend when the form submitted, but every update of the text in it will be echoed into the lower visible, but disabled input field.

Breedlove

Thanks for the info, nice to know, that it's not a general solution. There is no good solution for hiding a cursor in an input field, because it is a rear thing to do. No native CSS, or JS code is implemented so far, that intentionally does that. All we can do is make hacks that seems like it hides the cursor, but don't expect it to work everywhere. – Gadgetry

Answer 3

caret-color: transparent !important; works in newer browsers

Eniwetok

Poor support is a good point. I'd mainly recommend it for automated testing with frameworks like Puppeteer. – Eniwetok

How necessary is the !important? – Upbear

@Upbear it will work without it, unless there is custom CSS somewhere that is also setting caret-color In my use case I'm adding the style while taking screenshots so I want to override any custom CSS that may have been set. – Eniwetok

Answer 4

I was looking for a way to hide the blinking cursor on iOS devices for date inputs that trigger a calendar, because you could see the cursor blinking on top of the calendar picker.

input:focus { text-indent: -9999em; }

So in this case my CSS works nicely, obviously the downside is that if you need to see what you are typing then it is not good

Slump

Can you expand on your answer at all? – Simba

Sorry, i forgot to add: i was looking for a way to hide the blinking cursor on iOS devices for date inputs that trigger a calendar, because you could see the cursor blinking on top of the calendar picker. so i this case my CSS i works nicely, obviously the downside is that if you need to see what you are typing then it is not good. – Slump

You should include the explanation in the answer, not in a comment, @Slavo. Please, edit your answer. – Picardi

Just added it for him. – Grallatorial

I like this answer and it lead me to a better solution: input:focus { line-height: 0; } – Dartmoor

Another oddity: this solution works in IE, but not in Edge - the caret remains at the start position of the input. Change the text-indent value in Edge in the developer tools, and it disappears. – Dichotomize

Answer 5

Unfortunately you can not style the text cursor with CSS. You can only do some very bad JavaScript tricks but depending on the layout and requirements of your website, it might not be possible at all. So I would recommend to forget the whole idea.

Profane

Old question/answer, maybe true in 2010 but it is possible in 2016 to indirectly style the cursor with just css.. https://mcmap.net/q/225899/-hide-textfield-blinking-caret (in case anybody finds their way down here) – Tessellation

Answer 6

I think this is a perfect solution: make the input wide enough, align right to screen right, thus make cursor and content locate at the outside of the screen, while it's still clickable

Armand

Horrible idea for design and UX/UI purposes, and doesn't even offer an implementation. – Reprobative

Answer 7

<input style="position: fixed; top: -1000px">

Works in iOS8.

Ecklund

Answer 8

Setting the input to readonly also does this since it prevents focus but it may not be applicable to many use cases that still need it.

<input type="text" readonly />

Klina

Does not work in IE11 when you tab into the field, the cursor still shows. – Schreibe

Answer 9

you can "Hide textfield blinking cursor" by calling blur function on focus event

<input type="text" onfocus="this.blur()"/>

Taper

Who up-voted this? If you blur it on focus, you'll never be able to type in it... – Minnieminnnie

Unrelated but super useful for a different purpose. if you set an input field as "disabled" then change events won't trigger. doing this is a great workaround for keeping an input field disabled but still having the ability to attach change events to it. – Magog

If you only want an onclick event than this is useful. – Inductile

There is an element, which is called button, to fill this purpose. – Gadgetry

This is useful when input is used for third party controls , like input is part of a drop down from infragistics : This fix removes the blinking text in IE for readonly input – Amparoampelopsis

Answer 10

function noCursor(a){
  var a = document.getElementById(a),
      b = document.createElement('input');
  b.setAttribute("style","position: absolute; right: 101%;");
  a.parentNode.insertBefore(b, a);

  if(a.addEventListener){
    b.addEventListener("input",function(){a.value = b.value});
    a.addEventListener("focus",function(){b.focus()});
  }else{
    a.attachEvent("onfocus",function(){b.focus()});
    b.attachEvent("onpropertychange",function(){a.value = b.value});
  };
 
}

noCursor('inp');

<input id="inp">

You can use the function for each element jou want no cursor for.

Rosettarosette

Answer 11

just made a proof of concept for a friend of mine, using @sinfere 's idea:

demo: http://jsfiddle.net/jkrielaars/y64wjuhj/4/

The start of the input is offset so it falls outside of the container (which has overflow hidden) The actual caracters (and blinking cursor) wil never enter into view. The fake div is placed below the input field so a tap on the fake div will set focus on the invisible input.

<div class="container">
    <div id="fake" class="fake">
        <span class='star empty'></span>
        <span class='star empty'></span>
        <span class='star empty'></span>
        <span class='star empty'></span>
    </div>
    <input type="text" id="password" class="invisible" maxlength="4">
</div>

Froufrou