After Adding "readonly" attribute on text box not able to remove it in one event_问答_开发者

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

开发者 https://www.devze.com 2023-02-01 01:47 出处：网络

Steps to repro USE Internet Explorer Check unlimited check box Click on text box (It will remove tick/check from check box)

Steps to repro

USE Internet Explorer

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

We cannot enter in the text box

4. Click again on the text box. Now we w开发者_如何转开发ill 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

You need to set the readonly attribute to nothing like so

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

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.

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.

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

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

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

精彩评论

关注公众号

热门标签

图文推荐

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

更多 问答 相关资讯：

精彩评论

关注公众号

热门标签

图文推荐

更多问答相关资讯：