js+input框编辑、保存、取消内容

最新推荐文章于 2024-05-06 18:26:11 发布

甜甜笑乐开怀

最新推荐文章于 2024-05-06 18:26:11 发布

阅读量1.6k

点赞数 1

分类专栏： js 文章标签： javascript

本文链接：https://blog.csdn.net/weixin_41684068/article/details/107600970

版权

js 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

效果描述： input 表单开始是设置边框为none，然后紧跟着a链接包裹的编辑，取消、保存也是a链接包裹的且是隐藏的；当点击编辑的时候，可以编辑表单中的内容而且编辑二字消失，取消、保存出现，可以点击取消、保存进行相应的操作。

效果：
在这里插入图片描述

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
    padding: 0;
    margin: 0;
}
ul{
    margin: 30px ;
}
input{
       /* outline: none; */
       border: none;
}
li a:nth-child(3),li a:nth-child(4){
display: none;
}
    </style>
</head>

<body>
    <ul>
        <li>
            <input type="text" value="JavaScript权威指南" >
            <!-- 可以不加href属性，要是加的话就一定要写# 不然点击产生的效果会显示一瞬间 -->
            <a href="#">编辑</a>
            <a href="#">保存</a>
            <a href="#">取消</a>

        </li>
        <li>
            <input type="text" value="JavaScript权威指南" >
            <!-- 可以不加href属性，要是加的话就一定要写# 不然点击产生的效果会显示一瞬间 -->
            <a href="#">编辑</a>
            <a href="#">保存</a>
            <a href="#">取消</a>

        </li>
        <li>
            <input type="text" value="JavaScript权威指南" >
            <!-- 可以不加href属性，要是加的话就一定要写# 不然点击产生的效果会显示一瞬间 -->
            <a href="#">编辑</a>
            <a href="#">保存</a>
            <a href="#">取消</a>

        </li>
    </ul>
    <script>
        var lis = document.getElementsByTagName('li');
        for (var i = 0; i < lis.length; i++) {
          
            getResult(lis[i]);
        }
        function getResult(father) {
            //因为你是要将a input都循环三遍，在函数中又要直接用input第一个下标的值以及a的前三个所以是不能在外面写的
            var a = father.getElementsByTagName('a');
            var input = father.getElementsByTagName('input')[0];
            //编辑
            a[0].onclick = function () {
                input.style.border = '1px solid black';
                this.style.display = 'none';
                a[1].style.display = 'inline';
                a[2].style.display = 'inline';
            }
            //保存
            a[1].onclick = function () {

                input.innerText = input.innerText + '';
                input.style.border = 'none';
                a[0].style.display = 'inline';
                this.style.display = 'none';
                a[2].style.display = 'none';

            }
            // 取消
            a[2].onclick = function () {
                input.value = 'JavaScript权威指南';
                input.style.border = 'none';
                a[0].style.display = 'inline';
                a[1].style.display = 'none';
                this.style.display = 'none';

            }

        }  
     
    </script>
</body>

</html>

甜甜笑乐开怀

关注

1
点赞
踩
9

收藏

觉得还不错? 一键收藏
0
评论
js+input框编辑、保存、取消内容

想法： input 表单开始是设置边框为none，然后紧跟着a链接包裹的编辑，取消、保存也是a链接包裹的且是隐藏的；当点击编辑的时候，可以编辑表单中的内容而且编辑二字消失，取消、保存出现，可以点击取消、保存进行相应的操作。我比较爱上传复制粘贴可以直接运行的代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" con
复制链接

扫一扫