一.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# task】TaskContinuationOptions 位枚举

    TaskContinuationOptions 根据 TaskContinuationOptions 的不同,出现了三个分支 LongRunning:独立线程,和线程池无关 包含 PreferFair ...

  2. 【C#基础概念】元数据 metadate

    元数据是指"描述资料的资料".它被用来概述资料的基础信息,以简化查找过程与方便使用[6]. 创建资料的方法 资料的用途 创建的时间与日期 资料的创建者或作者 资料被创建在电脑网络的 ...

  3. LayUI使用注意

    # layui获取.修改checkbox的值 <input type="checkbox" name="MySwitch" value="x&q ...

  4. Oracle账户被锁：the account is locked

    转至:https://blog.csdn.net/weixin_37615080/article/details/80400239?utm_medium=distribute.pc_relevant_ ...

  5. JSP文件的上传

    JSP 文件上传 JSP 可以与 HTML form 标签一起使用,来允许用户上传文件到服务器.上传的文件可以是文本文件或图像文件或任何文档. 本章节我们使用 Servlet 来处理文件上传,使用到的 ...

  6. Dubbo服务框架和spring-cloud架构的优缺点

    Dubbo一.dubbo简介 Dubbo是阿里巴巴公司开源的一个高性能优秀的服务框架,使得应用可通过高性能的RPC实现服务的输出和输入功能,可以和Spring框架无缝集成. Dubbo是一款高性能.轻 ...

  7. mysql命令flush privileges命令

    修改一个用户的密码,命令如下 mysql> update user set password=password('新密码') where user='用户名'; 执行后报错: ERROR 105 ...

  8. Python：pyglet学习（3）：游戏循环

    在我们编游戏时,经常会用到一个无限循环,这就叫游戏循环. 先用@win.event试试 import pyglet as p win=p.window.Window(800,600) @win.eve ...

  9. mixin混入

    mixin(混入) 功能:可以把多个组件共用的配置提取成一个混入对象 使用方式: 第一步定义混合,例如: { data(){.........}, methods:{.........} ...... ...

  10. Golang 数据结构

    每种语言在实现数据结构有些许不同.go 是如何实现的呢? 1. 数组 Array go 中数组是相同的元素组成的集合,计算机会为数组分配一段连续的内存来保存元素,可以利用索引快速访问元素. go 中数 ...