How to hide a text box blinking with a cursor?

Question

I need to hide a text box blinking with a cursor in CSS / Javascript.

Is it possible?

Answer 1

<input type=text disabled="disabled"/> 

because I don’t see any other reason why you can do this.

edit:

I think you want to allow the user to scroll through text that is larger than the area, but not show blinking?

if so, you still want to disable it. don't just hide the blinking cursor. if the user cannot enter there, he must be disconnected. period.

now, if you still want to allow the user to see all the content, you must make the input file as large as the content. it does not slip away.

and then limit the size of the parent div using CSS overflow: hidden or scroll .

 <div style="overflow: scroll-x;"><input size=255 value="some string 255 char long" /></div> 

Answer 2

You can set maxlength in the text box and then use text-indent to move the cursor more characters than the maximum length.

For example, you can set maxlength=20 , and then set the text-indent: -20em text box so that the text text-indent: -20em from the borders of the window and cannot appear.

Answer 3

Here is my solution from another question, to which I have already answered:

fooobar.com/questions/120925 / ...

---

The basic idea is that the color of the cursor matches the color of the text. So, the first thing you do is make the text transparent, thus distracting the cursor. You can then make the text visible again with a shadow shadow.

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

Attention:

It seems to work under iOS 8. (Thanks @Altaveron for the info)

---

Another idea of ​​mine is a bit more hacked and requires javascript.

Part of HTML and CSS:

You make 2 input fields and position them exactly one above the other using z-index, etc. Then you make the top input box completely transparent, without focus, without color, and so on. You must disable the visible and lower input so that it displays only the contents of the above input, but actually does not work.

Javascript part:

After the above, you synchronize the two inputs. When you press the key or when changing, you copy the contents of the higher input to the lower one.

Summing up all of the above: you enter an invisible input and is sent to the backend when the form is submitted, but each update of the text in it will be reflected in the lower visible but disabled input field.

Answer 4

This is pretty old, but I just dealt with a similar problem. For browsers that support it (not IE8), you can set the color of the input element to the same as its background (possibly white), and then the cursor will be invisible.

Answer 5

If it has an input with the attribute readonly = "readonly", Safari on iOS still shows a blinking cursor when focusing on it.

So, to remove the blinking, the following worked for me:

 -webkit-user-select: none; user-select: none; 

Answer 6

Make the cursor the same color as the background?