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.

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… ?