一.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# 枚举器（enumerator）

    总结: 1.枚举器就像是序列中的"游标"或"书签".可以有多个"书签",移动其中任何一个都可以枚举集合,与其他枚举器互不影响.用来遍历数据结 ...

  2. c# $ @特殊字符

    c# @ 停止字符串中的转义字符,让字符串内的转义字符当正常字符输入. 因此,如果你需要类似"所见所得"效果的赋值,逐字字符串赋值方式会是你的首选!此外,需要注意的是,当使用符号 ...

  3. Oracle数据库巡检

    转至:https://blog.51cto.com/sf1314/2123068 select inst_id,status,count(*) from gv$session group by ins ...

  4. 01_opencv_python_基本图像处理

    1  图像基本操作   1.0.1  环境配置地址: Anaconda:https://www.anaconda.com/download/ Python_whl:https://www.lfd.uc ...

  5. 从零开始，开发一个 Web Office 套件（7）：新的问题—— Click 事件的 z-index

    这是一个系列博客,最终目的是要做一个基于 HTML Canvas 的.类似于微软 Office 的 Web Office 套件(包括:文档.表格.幻灯片--等等). 博客园:<从零开始, 开发一 ...

  6. （六）React Ant Design Pro + .Net5 WebApi：后端环境搭建-EF Core

    一. 简介 EFCore 是轻量化.可扩展.开源和跨平台版的常用数据访问技术,走你(官方文档) 二. 使用 1.安装数据库驱动包.PMC 工具包 不同的数据库有不同的包,参考,我用 PostgreSQ ...

  7. PHP日常错误总结

    session问题 问题描述 初到公司开发的项目在本地测试没有问题,部署到线上之后出来验证码一直错误,或者是CSRF token mismatch. 这些问题都是和session有关系,打开两个页面, ...

  8. java多线程中常用指令

    ------------恢复内容开始------------ 一.写在前面 好久没写博客了,这不快毕业了,应该会重新开始更新博客了.这次主要介绍查看线程状态等一系列常见指令,包括有jps.vmstat ...

  9. C++高并发场景下读多写少的优化方案

    概述 一谈到高并发的优化方案,往往能想到模块水平拆分.数据库读写分离.分库分表,加缓存.加mq等,这些都是从系统架构上解决.单模块作为系统的组成单元,其性能好坏也能很大的影响整体性能,本文从单模块下读 ...

  10. 2.8 C++STL set/multiset容器详解

    文章目录 2.8.1 引入 2.8.2 代码示例 2.8.3 代码运行结果 2.8.4 对组pair的补充 代码实例 运行结果 总结 2.8.1 引入 set/multiset容器概念 set和mul ...