I have a series of text boxes as shown below in which I have to disable the cursor and toggle its value between 'X' and '' when you click on the text box. This is the code I wrote:

HTML Code:

<input type="text" name="loan1" id="crossCheck1" class="crossCheck" onfocus="this.blur()" readonly="readonly" maxlength='1' style=" width: 13px; height:13px; border-style:none;font-weight:bold; font-family:Arial Narrow; font-size:14px; color:#000000;margin-left:85px;cursor:hand"/>

<input type="text" name="loan2" id="crossCheck2" class="crossCheck" onfocus="this.blur()" readonly="readonly" maxlength='1' style=" width: 13px; height:13px; border-style:none;font-weight:bold; font-family:Arial Narrow; font-size:14px; color:#000000;margin-left:85px;cursor:hand"/>

<input type="text" name="loan3" id="crossCheck3" class="crossCheck" onfocus="this.blur()" readonly="readonly" maxlength='1' style=" width: 13px; height:13px; border-style:none;font-weight:bold; font-family:Arial Narrow; font-size:14px; color:#000000;margin-left:85px;cursor:hand"/>

Javascript:

$(document).ready(function() {
        $( ".crossCheck" ).click(function() {

            var cross =  $('#crossCheck1').val();
            var check = 'X' ;
            if(cross == "" ){
                document.getElementById("crossCheck1").value= check;
            }else{
                document.getElementById("crossCheck1").value= '';
            }

        });  
});

1. Here, the cursor can be visible when the content changes, could you tell me a way to remove the cursor.

2. Could you tell me how to change the value only of the text box that is clicked?

Demo Here

UPDATE:

Idont want any cursor in the text box, is it possible to remove it pletely

I have a series of text boxes as shown below in which I have to disable the cursor and toggle its value between 'X' and '' when you click on the text box. This is the code I wrote:

HTML Code:

<input type="text" name="loan1" id="crossCheck1" class="crossCheck" onfocus="this.blur()" readonly="readonly" maxlength='1' style=" width: 13px; height:13px; border-style:none;font-weight:bold; font-family:Arial Narrow; font-size:14px; color:#000000;margin-left:85px;cursor:hand"/>

<input type="text" name="loan2" id="crossCheck2" class="crossCheck" onfocus="this.blur()" readonly="readonly" maxlength='1' style=" width: 13px; height:13px; border-style:none;font-weight:bold; font-family:Arial Narrow; font-size:14px; color:#000000;margin-left:85px;cursor:hand"/>

<input type="text" name="loan3" id="crossCheck3" class="crossCheck" onfocus="this.blur()" readonly="readonly" maxlength='1' style=" width: 13px; height:13px; border-style:none;font-weight:bold; font-family:Arial Narrow; font-size:14px; color:#000000;margin-left:85px;cursor:hand"/>

Javascript:

$(document).ready(function() {
        $( ".crossCheck" ).click(function() {

            var cross =  $('#crossCheck1').val();
            var check = 'X' ;
            if(cross == "" ){
                document.getElementById("crossCheck1").value= check;
            }else{
                document.getElementById("crossCheck1").value= '';
            }

        });  
});

1. Here, the cursor can be visible when the content changes, could you tell me a way to remove the cursor.

2. Could you tell me how to change the value only of the text box that is clicked?

Demo Here

UPDATE:

Idont want any cursor in the text box, is it possible to remove it pletely

• javascript
• jquery
• html
• jquery-ui
• jsp

• Just out of curiosity, why don't you use a stylesheet? – Roko C. Buljan Commented Aug 29, 2013 at 6:33
• I dont know how to use it ;) – user2077648 Commented Aug 29, 2013 at 7:12

3 Answers 3

Another simple method to disable cursor in a readonly textarea is

<textarea readonly onfocus="this.blur()">Content</textarea>

I tested this in Firefox ESR 24.1.0 and chorme 30.0.1599.101 m. In chrome it doesnt matter to have onfocus="this.blur()"

$(document).ready(function() {
    $( ".crossCheck" ).click(function() {

        var cross =  $(this).val();
        var check = 'X' ;
        if(cross == "" ){
            $(this).val(check).css("cursor","none");// set value and remove cursor
        }else{
             $(this).val().css("cursor","pointer");// set cursor
        }

    });  
});

reference css in jquery

edited

<html>
<head>
<script src="http://code.jquery./jquery-1.9.1.js"></script>
<script>
jQuery(document).ready(function() {
        jQuery(".crossCheck").click(function() {
            var cross =  jQuery(this);
            var check = 'X' ;
            if(cross.val() == "" ){
                cross.val(check);
                cross.css("cursor","default");
            }else{
                cross.val('');
                cross.css("cursor","none");
            }
        });  
  });
  </script>
</head>
<body>
<input type="text" name="loan1" id="crossCheck1" class="crossCheck" onfocus="this.blur()" readonly="readonly" maxlength='1'/>

<input type="text" name="loan2" id="crossCheck2" class="crossCheck" onfocus="this.blur()" readonly="readonly" maxlength='1' />

<input type="text" name="loan3" id="crossCheck3" class="crossCheck" onfocus="this.blur()" readonly="readonly" maxlength='1'/>
</body></html>

i dont realy understand u, because im have bad english but this code, hide cursor when is empty and back when input contain 'X',