How not to display blinking text cursor, in read only, textarea through JQuery?

Question

On an event, The texarea is set to readonly. But when user click it, it shows text cursor blinking in textarea.

<textarea readonly="readonly"></textarea>

Fiddle: https://jsfiddle.net/foeyo7qc/

Requirement: The textarea should be readonly (not disabled); but on click of it the text cursor should not be displayed blinking.

is there any way to do it through jQuery?

Update:

Browser: IE-10+ Mozilla Latest Chrome Latest

possible duplicate of [Hide textfield blinking cursor](http://stackoverflow.com/questions/3671141/hide-textfield-blinking-cursor) — Luís Ferreira, May 27 '15 at 10:47
http://stackoverflow.com/questions/7917592/html-cursor-showing-in-readonly-input-text — G.L.P, May 27 '15 at 10:50
Does it have to be a `textarea`? Maybe you can replace it with a `div` as long as it's readonly. — Gabriel Negut, May 27 '15 at 10:54

Nacho Ramos Sánchez · Answer 1 · 2015-05-27T11:00:24.750

1

Try adding this to your <textarea> tag or class:

textarea{
    ...
    color : transparent;
}

This should fake the effect you want.

EDIT

Useless if you need to insert some text.

edited May 27 '15 at 11:00

answered May 27 '15 at 10:51

Nacho Ramos Sánchez

564
4
21

It also makes any text in the textarea invisible – adeneo May 27 '15 at 10:55

score 0 · Answer 2 · answered May 27 '15 at 10:54

0

Try setting font-size to 0, You'll have to set a height and a width for the <textarea> now though

textarea{
    width:200px;
    height:100px;
    font-size : 0;
}

answered May 27 '15 at 10:54

George

6,630
2
29
36

score 0 · Accepted Answer · answered Jun 12 '15 at 07:12

Following snippet helped me in resolving it:

$('textarea').on('mouseover', function (e) {
        $(this).is('[readonly]') ? $(this).addClass("cursorNotAllowed") : $(this).removeClass("cursorNotAllowed");
    });

    $('textarea').focus(function(){
        $(this).is('[readonly]') ? this.blur() : "";
    });

How not to display blinking text cursor, in read only, textarea through JQuery?

3 Answers3