强制文本插入符号出现在只读输入中

Question

Scenario: When an input field is set .readOnly = true , the text cursor is replaced with the pointer arrow cursor and the input field cannot be entered or modified. However, clicking into such a readonly input field with text in it does actually register the cursor's location within the text, even though the display does not show the clicked location by visually rendering a text cursor caret, like a read-enabled input field would.

Here's the question: Is there a way to force the text cursor caret to appear in an input field set .readOnly = true , in other words, as if the input field were actually read enabled, but still keep the input field readonly?

Answer 1

What you want to achieve is actually an existing bug in few browsers.

Check this answer

But you can achieve this by below workaround.

Remove readOnly attribute and try with below code

 $('document').ready(function() { $('input[type="text"]').keydown(function(e) { return false; }); $('input[type="text"]').bind("cut copy paste", function(e) { e.preventDefault(); }); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <input type="text" value="some value" />

Answer 2

You can do this with css :

input[readonly] {
  cursor: text;
}

or

<input type="text" style="cursor: text;">