CODEWITHSUNDEEP
jqueryhtmlinternet-explorer
Sreedhar K
Sreedhar K

Reputation:

After Adding "readonly" attribute on text box not able to remove it in one event

Steps to repro
USE Internet Explorer

  1. Check unlimited check box
  2. Click on text box (It will remove tick/check from check box)
  3. Try to enter text in text box

We cannot enter in the text box
4. Click again on the text box. Now we will be able to enter text in the text box

We tried by
1. Making attribute readOnly to flase i.e. $('#myinput').attr('readOnly', false);
2. Calling $('#myinput').click();

Below is the HTML code

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Make input read only</title>
    <script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery/jquery-1.4.4.min.js"></script>
</head>
<body>
    <input id="myinput" type="text" />
    <input id="mycheck" type="checkbox" />
    <script type="text/javascript">
        /*oncheck box click*/
        $('#mycheck').click(function () {
            if ($(this).attr('checked')) {
                $('#myinput').attr('readOnly', 'readOnly');
            }
            else {
                $('#myinput').removeAttr('readOnly');
                /* also tried  
                 * $('#myinput').attr('readOnly', false);
                 * $('#myinput').attr('readOnly', '');
                 */
            }
        });
        /*on text box click*/
        $('#myinput').click(function () {
            $('#mycheck').removeAttr('checked');
            $('#myinput').removeAttr('readOnly');
            /* also tried  
             * $('#myinput').attr('readOnly', false);
             * $('#myinput').attr('readOnly', '');
             */
        });
    </script>
</body>
</html>

Live copy

Upvotes: 0

Views: 13658

Answers (4)

Bugfixer
Bugfixer

Reputation: 2617

Use this For IE and it also works in chrome and mozilla

$('#myinput').removeAttr("readonly");
$('#myinput').select();

Upvotes: 0

seraj
seraj

Reputation: 1

function preventBackspace(e) {

    var evt = e || window.event;

    if (evt) {
        if (evt.srcElement.getAttribute('readonly')) {
            var keyCode = evt.charCode || evt.keyCode;
            if (keyCode === 8) {
                if (evt.preventDefault) {
                    evt.preventDefault();
                } else {
                    evt.returnValue = false;
                }
            }
        }
    }
}

I got a scenario where the textboxes will switch between readonly & editable, so I added the condition if (evt.srcElement.getAttribute('readonly')) which helped.

Upvotes: 0

Christian
Christian

Reputation: 28165

I had this same issue, and reported it on stackoverflow as well, one sec while I find it...

Edit: Found it.

If you read my post, it also explains what is happening. In fact, the textbox actually got unlocked (unlike what Tyde tried). The problem relates to focus/selection.

Upvotes: 1

Tyde
Tyde

Reputation: 252

You need to set the readonly attribute to nothing like so

$('#myinput').attr('readOnly', '');

Upvotes: 2

Related Questions