简体   繁体   English

在文本框上添加“只读”属性后无法在一个事件中将其删除

[英]After Adding “readonly” attribute on text box not able to remove it in one event

Steps to repro 复制步骤
USE Internet Explorer 使用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. 4.再次单击文本框。 Now we will be able to enter text in the text box 现在我们将能够在文本框中输入文本

We tried by 我们尝试过
1. Making attribute readOnly to flase ie $('#myinput').attr('readOnly', false); 1.将属性设置为readOnly,即$('#myinput')。attr('readOnly',false);
2. Calling $('#myinput').click(); 2.调用$('#myinput')。click();

Below is the HTML code 以下是HTML代码

<!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 即时复制

您需要将readonly属性设置为类似这样的值

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

I had this same issue, and reported it on stackoverflow as well, one sec while I find it... 我遇到了同样的问题,并在stackoverflow上报告了它,一秒钟后发现了它。

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). 实际上,文本框实际上已被解锁(与Tyde尝试的不同)。 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. 我有一个场景,其中的文本框将在只读和可编辑之间切换,因此我添加了条件if (evt.srcElement.getAttribute('readonly'))有所帮助。

Use this For IE and it also works in chrome and mozilla 将此用于IE,也可以在chrome和mozilla中使用

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

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM