js去除 html 中 input 的readOnly属性

Posted 2023-05-03

网页代码：
<input id="readerBarcode" type="text" onkeypress="return onReaderBarcodePress(event)" value="" readonly="readonly" name="readerBarcode" size="20">
直接把 readonly 属性删除或替换任意其他字符。
JS代码能在 地址栏直接运行

<input type="text" readonly id=aa>
<input type=button onclick="document.all.aa.readOnly = false" value="input">

拓展资料：

readonly 属性规定输入字段为只读。只读字段是不能修改的。不过，用户仍然可以使用 tab 键切换到该字段，还可以选中或拷贝其文本。readonly 属性可以防止用户对值进行修改，直到满足某些条件为止（比如选中了一个复选框）。然后，需要使用 javascript 消除 readonly 值，将输入字段切换到可编辑状态。readonly 属性可与 <input type="text"> 或 <input type="password"> 配合使用。

参考资料：html标签的相关知识

参考技术A document.getElementById("input1").readOnly=true
或者 false

JS的话，建议用JS框架，比较方便，比如 jq追问

怎么 把代码 直接在地址栏里运行，改变当前页面的 readOnly属性

追答

不能地址栏运行

一般放在JS文件里

追问

这个网页是线上的，我修改不了的，那怎么才能修改 readOnly属性呢

追答

不是你自己网站？
如果不是的话，那就没办法了，除非你懂黑客技术。。

参考技术B $("aa").removeAttr("readOnly");用这个方法

js 动态控制 input 框 的只读属性

设置input框的只读属性写成了readonly="true" 尼玛,坑死我了.下面才对:

<input class="inuptxt ac_input" type="text" id="tt" name="tt" readonly="readonly">

input 框的只读属性：  readonly

在页面中直接添加为只读时，可在input中直接添加   readonly="readonly"，但是如果想通过点击按钮来改变的话，需要通过js（或jquery）来实现。

最近一次使用这个，终于发现了以前写这个js控制的时候为什么总是那么郁闷了，原来，js  在对于readonly、disabled等属性设置时，有一个小bug（至少我是这么认为）：首先，document.getElementById("id").readonly = "true";  设置input为只读，但是，当通过document.getElementById("id").readonly="false"  来去掉只读属性时，没有作用，此时，需要把  false  外面的引号给去掉js语句才能正常工作。

附：

1. jquery  通过id属性设置与取消只读属性

 

设置只读：$("#id").attr("readOnly","true");

取消只读：$("#id").attr("readOnly",false);//注意false不带引号!!!

 

2. jquery  批量设置与取消只读属性

/*   id为sa的div中，所有input框   */

 

设置只读：$("#sa input").attr("readOnly","true");

取消只读：$("#sa input").attr("readOnly",false);

 

感谢:https://blog.csdn.net/katherine119/article/details/39154615

 

以下写得helloworld:

<script>
    //初始化voucherNo文本框
    $(document).ready(function () {
        var voucherNo = $("#voucherNo");
        voucherNo.attr("readOnly","true");
        voucherNo.css(‘background-color‘,‘#DEDEDE‘);
    });

    //voucherNo样式
    function changeStyle(){
        var paymentMode = $("#paymentMode").val();
        // $("#tt").css(‘background-color‘,‘#DEDEDE‘);//没毛病
        var voucherNo = $("#voucherNo");
        if(paymentMode!=‘04‘){//没毛病
            voucherNo.attr("readOnly","true");
            voucherNo.css(‘background-color‘,‘#DEDEDE‘);
        } else {
            voucherNo.attr("readOnly",false);
            voucherNo.css(‘background-color‘,‘#FFFFFF‘);
        }
    }
</script>