HTML: Cursor Showing in Readonly Input Text

HTML: cursor showing in readonly input text?

Sounds like a bug!

There is a similar bug (396542) open with Mozilla, saying that the cursor should blink in readonly inputs — but that behavior feels wrong, a blinking cursor is supposed to mean, “you can type here.”

You should comment on that bug and/or file new ones (with Mozilla here and with Microsoft here)!

In the meantime, using disabled or changing the behavior with JavaScript, as @nikmd23 suggested, seems like the best workaround.

Use readonly attribute in <input> without changing the cursor

Try this markup in your form for text field

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

main thing which helps you hide the cursor is onfocus="this.blur()".

show caret on readonly html input

To solve the issue, I implemented my own caret. I created a div with 1px width and proper height. The #caret is positioned relatively to the .input-group.

To make it easy, I use a monospaced font on the input. So every character has same width. Then I just listen for any event on the input and update the position of the caret accordingly. text-shadow and transparent color make the original caret invisible on firefox mobile.

My input field is aligned to the right.

Updated
https://jsfiddle.net/9fr46y2w/3/

HTML

<div class="input-group">
  <input type="text" id="input" onclick="showCaret(this);">
  <div id="caret"></div>
</div>

CSS

#input {
  color: transparent;
  font-family: monospace;
  font-size: 36px;
  height: 48px;
  margin: 0;
  padding: 0;
  text-align: right;
  text-shadow: 0 0 0 #yourTextColor;
  width: 100%;
}

.input-group {
  margin: 0;
  padding: 0;
  position: relative;
}

#caret {
  background: white;
  color: transparent;
  height: 41px;
  position: absolute;
  top: 4px;
  right:0;
  width: 1px;

  animation-duration: 1s;
  animation-name: blink;
  animation-iteration-count: infinite;
}

@keyframes blink {
  from {
    opacity: 1; 
  }

  49.9% {
      opacity: 1;
  }
  50% {
    opacity: 0;
  }

  99.9% {
      opacity: 0;
  }

  to {
    opacity: 1;
  }
 } 

JavaScript

function showCaret(input) {
  let widthSizeRatio = 21.6/36;
  let charWidth = widthSizeRatio * 36;
  let length = input.value.length;
  let cur = input.selectionStart;

  document.getElementById("caret").style.right = Math.floor((length - cur) * charWidth) + "px";
}

How to enable cursor move while using readonly attribute in input field in chrome browser

Theres a really good reason that Chrome doesn't let the cursor blink in a read only text box and that is because a blinking cursor indicates that a user can type in that control.

So first up its worth deciding from a UX point of view if you want to go against that principle!

If you really really do, you could fake a read only behaviour by using a custom data- attribute to specify that you want the input to be read only and then just ignore any non-navigational keypresses.

var allowedKeys = {
    "37" : "arrow-left",
    "38" : "arrow-up",    
    "39" : "arrow-right",    
    "40" : "arrow-down",
    "9" : "tab",    
    "27" : "esc"        
}

$("input[data-readonly=readonly]").keydown(function(e){
    console.log(e.which);
    if (!allowedKeys[e.which]) {
        e.preventDefault();
    }
});

You can take a look at the fiddle here. http://jsfiddle.net/BUcC2/1/

If your intention is for this to be a normal input control that should behave in a standard way, I would recommend not using this method and stick with the browser's interpretation of the best way to display html :)

Remove text caret/pointer from focused readonly input

On mine there is no caret or so:

<input type="text" value="test" readonly="readonly" >

Take a look at this: http://www.cs.tut.fi/~jkorpela/forms/readonly.html

Sorry, now I understand your problem.

Try this:

<input type="text" value="test" onfocus="this.blur()" readonly="readonly" >

Cursor blinking even though field is readonly

readonly="readonly" is what you should be using.

How to show blinking text cursor/caret in a read-only div

Here you go :) . All you need to do is disable cut/copy/paste and key press events.

<div  contenteditable="true"  oncut="return false"  onpaste="return false"  onkeydown="return false;"  style="user-drag: none;"  ondragenter="return false;"   ondragleave="return false;"   ondragover="return false;"   ondrop="return false;">  Inner content</div>

---

Related Topics