分享

js技术之input只读功能可以通过js设置readonly

 hncdman 2023-03-15 发布于湖南

一.input标签

  • 输入项标签,不同type属性,会有不同的显示效果和不同的作用

  • input标签的属性:

    • disabled:表单项禁用,不可修改值,也不会被提交

    • readonly:表单项只读,不可修改值,但会被提交

二.案例

根据Name来获取并设计(本人使用)

复制代码

<!DOCTYPE html><html><head>
    <meta charset="utf-8"></head><body>
    <!--显示获取的1值 并且 设置input权限为只读-->
    <input type="button" value="只读/可写" onclick="autoGain()">
    <!--作用框,用于实现效果-->
    <input type="text" name="wzwName" readonly="readonly"></body><script src="https://cdn./jquery/1.10.2/jquery.min.js"></script><script type="text/javascript">
    // 只读/可写 切换单机事件方法
    function autoGain() {        // 获取input中的值
        var val = $("input[name='wzwName']").val();        // 如果等于1说明已经设置为只读模式了
        if(val == 1)
        {            // 将只读模式删除            $("input[name='wzwName']").removeAttr("readonly");
        }else{            // 添加只读模式到input框中并设置value值为1            $("input[name='wzwName']").val("1").attr("readonly","readonly");
        }
    }</script></html>

复制代码

根据id来获取并设计

复制代码

    
    Title
    
              切换用户名readonly属性

复制代码

三.总结

  1. 此方法不一定适用于所有人,所有环境,这是我找了5种以上的方法才写出来的,可能在他人的电脑不一定奏效

  2. readonly后面的值最好也是要readonly,当然用true也可以,不过调成false可是不会取出只读的效果

  3. removeAttr()同样是找了很久才找到的删除input标签上属性的一种方案,应用范围很广!!!

  4. 我这里只用了以Name为点来写,可以变化思维,ID同样奏效

    本站是提供个人知识管理的网络存储空间,所有内容均由用户发布,不代表本站观点。请注意甄别内容中的联系方式、诱导购买等信息,谨防诈骗。如发现有害或侵权内容,请点击一键举报。
    转藏 分享 献花(0

    0条评论

    发表

    请遵守用户 评论公约

    类似文章 更多