一.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.staticfile.org/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来获取并设计

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <script>

        function switchUser() {

            var usernameEl = document.getElementById("username");

            const beforeVal = usernameEl.getAttribute("readonly");

            console.log("切换前状态：" + getStatus(beforeVal));

            if (beforeVal === null) {

                usernameEl.setAttribute("readonly", "readonly");

            } else {

                usernameEl.removeAttribute("readonly");

            }

            const afterVal = usernameEl.getAttribute("readonly");

            console.log("切换后状态：" + getStatus(afterVal));

        }

        function getStatus(readonlyVal) {

            if (readonlyVal === null) {

                return "读写"

            } else {

                return "只读"

            }

        }

    </script>

</head>

<body>

用户名：<input type="text" id="username" name="username"><br>

<button onclick="switchUser()">切换用户名readonly属性</button>

</body>

</html>

三.总结

  1. 此方法不一定适用于所有人，所有环境，这是我找了5种以上的方法才写出来的，可能在他人的电脑不一定奏效
  2. readonly后面的值最好也是要readonly,当然用true也可以，不过调成false可是不会取出只读的效果
  3. removeAttr()同样是找了很久才找到的删除input标签上属性的一种方案，应用范围很广！！！
  4. 我这里只用了以Name为点来写，可以变化思维，ID同样奏效

js技术之input只读功能可以通过js设置readonly的更多相关文章

  1. js实现复制 、剪切功能-clipboard.min.js 示例

    html: <div id="txt">我是要复制的内容</button> <button id="copyBtn">点击复 ...

  2. 大前端技术系列：TWA技术+TensorFlow.js => 集成原生和AI功能的app

    大前端技术系列:TWA技术+TensorFlow.js => 集成原生和AI功能的app ( 本文内容为melodyWxy原作,git地址:https://github.com/melodyWx ...

  3. APNs功能之Node.js和Mysql应用总结

    APNs功能之Node.js和Mysql应用总结 这篇文档主要是总结Node.js和Mysql的学习心得体会.当然也可以看作是此前所写的消息推送服务的续篇. 简单描述下应用背景,我们的应用需要实现苹果 ...

  4. js技术之拖动table标签

    一.js技术之拖动table标签 起因:前几天公司,突然安排一个任务 任务描述:要求尺码table列表要像Excel表中一样可以直接移动整行尺码到任意行位置 技术点:采用ui的sortable技术来h ...

  5. 【转】js实现复制到剪贴板功能，兼容所有浏览器

    两天前听了一个H5的分享,会议上有一句话,非常有感触:不是你不能,而是你对自己的要求太低.很简单的一句话,相信很多事情不是大家做不到,真的是对自己的要求太低,如果对自己要求多一点,那么你取得的进步可能 ...

  6. 【原】js实现复制到剪贴板功能，兼容所有浏览器

    两天前听了一个H5的分享,会议上有一句话,非常有感触:不是你不能,而是你对自己的要求太低.很简单的一句话,相信很多事情不是大家做不到,真的是对自己的要求太低,如果对自己要求多一点,那么你取得的进步可能 ...

  7. 黄聪：JS实现复制到剪贴板功能，兼容所有浏览器（转）

    两天前听了一个H5的分享,会议上有一句话,非常有感触:不是你不能,而是你对自己的要求太低.很简单的一句话,相信很多事情不是大家做不到,真的是对自己的要求太低,如果对自己要求多一点,那么你取得的进步可能 ...

  8. JS实现Web网页打印功能（IE）

    问题描述:     JS实现Web网页打印功能 问题解决:     这里主要使用WebBrowser控件的ExeWB在IE中打印功能的实现 WebBrowser介绍:         WebBrows ...

  9. js监听input等表单输入框的变化事件oninput

    js监听input等表单输入框的变化事件oninput,手机页面开发中使用到文本框textarea输入字符监听文本框变化计算还可以输入多少字符,如果使用onkeyup的话是无法监听到输入法输入的文本变 ...

随机推荐

  1. 【C# 线程】内存屏障 MemoryBarrier

    背景 同步基元分为用户模式和内核模式 用户模式:Iterlocked.Exchange(互锁).SpinLocked(自旋锁).易变构造(volatile关键字.volatile类.Thread.Vo ...

  2. ROS开发指令

    常用指令: 1.rospack 查找某个pkg的地址$rospack find package_name列出本地所有pkg$rospack list 2.roscd 跳转到某个pkg路径下$roscd ...

  3. think php 图像加水印

    1.将下载好的字体引入至 thinkPHP 框架的public/static 下(这里我建了一个文件夹叫font) (1.) (2.)   2.将字体路径写入config.php中 'font'=&g ...

  4. Java入土---Java运行机制及IDEA的安装使用

    Java运行机制及IDEA的安装使用 java程序运行机制 计算机高级语言分为编译型语言跟解释型语言,而java同时具有两者的特点. 可能对于新手来说,什么是编译,什么是解释; 简单来说,编译就是将代 ...

  5. github：git clone下载加速以及vim-plug下载插件加速

    git clone 下载加速 1. 先在github将仓库地址复制下来 2. git clone时将https://github.com/* 改为https://gitclone.com/github ...

  6. AOP源码解析之二-创建AOP代理前传，获取AOP信息

    AOP源码解析之二-创建AOP代理前传,获取AOP信息. 上篇文章对AOP的基本概念说清楚了,那么接下来的AOP还剩下两个大的步骤获取定义的AOP信息,生成代理对象扔到beanFactory中. 本篇 ...

  7. 详解 Java 内部类

    内部类在 Java 里面算是非常常见的一个功能了,在日常开发中我们肯定多多少少都用过,这里总结一下关于 Java 中内部类的相关知识点和一些使用内部类时需要注意的点. 从种类上说,内部类可以分为四类: ...

  8. exit函数和return语句

    exit函数是c语言的库函数,有一个整型的参数,代表进程终止,这个函数需<stdlib.h>头文件 在函数中写return只是代表函数终止了,不管在程序的任何位置调用exit那么进程就立即 ...

  9. 放在initramfs的ko会先加载，还是/lib/modules/下面的ko会先加载？

    如果是在switchroot时加载,用的是initramfs,在switchroot后,用的是硬盘上的,有些ko放到initramfs中,但是switchroot前不加载的话,用的还是硬盘上的,关键看 ...

  10. VS Code通过code runner插件编译运行多个cpp文件 | 链接编译.h文件

    1.多个cpp文件在同一级目录 参考:https://jingyan.baidu.com/article/2f9b480d7ceb3d01ca6cc224.html 此时可通过修改Code Runne ...