按钮控制输入框编辑状态（原生JS）

最新推荐文章于 2023-11-13 15:50:07 发布

原创最新推荐文章于 2023-11-13 15:50:07 发布 · 578 阅读

0 ·

CC 4.0 BY-SA版权

JavaScript 专栏收录该内容

28 篇文章

订阅专栏

该博客展示了如何通过原生JavaScript实现按钮控制输入框的编辑状态。提供了一个在线Demo地址，供读者实践和理解相关功能。

源码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>按钮控制输入框编辑状态</title>
    <style>
        * {
            float: left;
        }

        #begin_input {
            height: 20px;
            width: 200px;
            border: 1px solid black;
        }

        #save_input {
            position: absolute;
            height: 20px;
            width: 200px;
            border: 1px solid black;
        }

        #edit_input {
            position: absolute;
            height: 20px;
            width: 200px;
            border: 1px solid black;
        }

        #edit {
            position: relative;
            top: 15px;
            left: 20px;
        }

        #save {
            position: relative;
            top: 15px;
            left: 40px;
        }

        .hide {
            visibility: hidden;
        }

        .show {
            visibility: visible;
        }
    </style>
</head>

<body>
    <div id="input_box">
        <p id="begin_input"></p>
        <p id="edit_input" contenteditable="true"></p>
        <p id="save_input" contenteditable="false"></p>

        <div id="edit">edit</div>
        <div id="save">save</div>


    </div>

    <script>
        var edit = document.getElementById("edit");
        var begin_input = document.getElementById("begin_input");
        var edit_input = document.getElementById("edit_input");
        var save_input = document.getElementById("save_input");
        edit.onclick = function () {
            console.log("edit");
            begin_input.setAttribute('class', 'hide');
            edit_input.setAttribute('class', 'show');
            save_input.setAttribute('class', 'hide');
        }

        var save = document.getElementById("save");
        save.onclick = function () {
            console.log("save");
            begin_input.setAttribute('class', 'hide');
            edit_input.setAttribute('class', 'hide');
            save_input.setAttribute('class', 'show');
        }
    </script>
</body>

</html>