一.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. .NET 5+ 中已过时的功能

    从 .NET 5 开始,一些新标记为已过时的 API 使用 ObsoleteAttribute 上的两个新属性. ObsoleteAttribute.DiagnosticId 属性指示编译器使用自定义 ...

  2. 【C# Task】 ValueTask/Task<TResult>

    概要 1.如果异步方法的使用者使用 Task.WhenAll 或 Task.WhenAny,则在异步方法中使用 ValueTask<T> 作为返回类型可能会产生高昂的成本.这是因为您需要使 ...

  3. 【C#版本】微信公众号模板消息对接（二）（图文详解）

    本篇文章承接上一篇文章内容,点击此段文字传送至上一篇文章. 特此说明:本篇文章为个人原创文章,创作不易,未经作者本人同意.许可等条件,不得以任何形式搬运.转载.抄袭(等包括但不限于上述手段)本文章,否 ...

  4. 用NSoup解析HTML

    1.在NuGet程序包中添加NSoup包 public static void TestNSoup(string urlStr) { WebClient wc = new WebClient(); b ...

  5. ajax 无刷新页面登录

    1:页面代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UT ...

  6. VUE npm run build的项目出现跨域请求的问题npm run dev没有这个问题

    报错信息 Access to XMLHttpRequest at 'http://platformapi-test.lih-elearning.cn/api/v1/login' from origin ...

  7. mysql保存emoji表情,utf8mb4保存不了表情的问题

    报错信息 : Incorrect string value: '\xF0\x9F\x99\x85\xE2\x80...' for column 'content' at row 1 mysql数据库的 ...

  8. 『现学现忘』Docker基础 — 28、Docker容器数据卷介绍

    目录 1.什么是Docker容器数据卷 2.数据卷的作用 3.数据卷的使用 1.什么是Docker容器数据卷 Docker容器数据卷,即Docker Volume(卷). 当Docker容器运行的时候 ...

  9. Centos7 使用Docker安装rocket.chat聊天工具

    镜像下载.域名解析.时间同步请点击阿里云开源镜像站 下载安装 Rocket.Chat 目前最新的版本为 4.0.1,可以通过手动或者容器的方式安装.这里我推荐使用容器,部署过程会方便不少. 如果要用容 ...

  10. 装饰器property的简单运用

    property函数:在类中使用,将类中的方法伪装成一个属性 使用方法:在函数,方法,类的上面一行直接@装饰器的名字 装饰器的分类: 装饰器函数 装饰器方法:property 装饰类 class St ...