美文网首页
禁用文本框

禁用文本框

作者: Yuann | 来源:发表于2017-09-21 21:39 被阅读0次
禁用文本框.jpg
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>

    账号: <input type="text" value="传智你好..."/><button>禁用</button><button>解禁</button><br><br>
    密码: <input type="password" value="aaabbbccc"/>

    <script>
        //需求:禁用文本框
        //步骤:
        //1.获取事件源和相关元素
        //2.绑定事件
        //3.书写事件驱动程序


        //1.获取事件源和相关元素
        var inp = document.getElementsByTagName("input")[0];
        var btn1 = document.getElementsByTagName("button")[0];
        var btn2 = document.getElementsByTagName("button")[1];
        //2.绑定事件
        btn1.onclick = function () {
            //3.书写事件驱动程序
            inp.disabled = "no";
        }
        btn2.onclick = function () {
            //3.书写事件驱动程序
            inp.disabled = false;
//            inp.removeAttribute("disabled");
        }
    </script>


</body>
</html>

相关文章

  • 禁用文本框

  • IE禁用Backspace键返回上个页面方法 vue H5都可以

    如果文本框是只读的,那么就禁用Backspace键。如果有文本框就继续可以使用。 Vue代码可以直接复制到id="...

  • DOM操作二

    01-隐藏显示二维码 02-禁用文本框 03-文本框获取焦点 04-用户注册高亮显示 05-设置水果 06-for...

  • 前端面试每日 3+1 —— 第381天

    今天的知识点 (2020.05.01) —— 第381天 (我也要出题) [html] 怎样在文本框中禁用中文输入...

  • 神奇的css

    在文本框中禁用中文输入法:input,textarea{ime-mode:disabled;} 移除被点链接的点框...

  • 2017.11.6

    Enabled确定是否可以启用或禁用该控件Click单击按钮时将触发该事件 MaxLength 可在文本框中输入的...

  • 使input文本框不可编辑的3种方法

    使input文本框不可编辑的3种方法,现在总结一下: 1: disabled 属性规定应该禁用 input 元素,...

  • dom_12 禁用文本框

  • DOM详解

    DOM案例 1、显示二维码2、禁用文本框和获取失去焦点输入事件3、表单处理,Input取值赋值和select选水果...

  • DOM对象是什么时候被创建的

    我本来想想练习一个小范例: 页面上写一个文本输入框和一个按钮,点击按钮让文本框禁用,不可再输入。 思路是这样: 先...

网友评论

      本文标题:禁用文本框

      本文链接:https://www.haomeiwen.com/subject/pfltextx.html