JavaScript利用函数实现简单的文本编辑

最新推荐文章于 2024-07-30 11:35:46 发布

海阔天空ZMZ

最新推荐文章于 2024-07-30 11:35:46 发布

阅读量192

点赞数

分类专栏： JavaScript 文章标签： JavaScript 文本编辑

本文链接：https://blog.csdn.net/weixin_45457515/article/details/99761094

版权

JavaScript 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

本文介绍了如何利用JavaScript实现一个简单的文本编辑功能。点击编辑按钮，文本内容可被修改；点击取消，修改将被丢弃，文本恢复原样。

摘要由CSDN通过智能技术生成

如图
在这里插入图片描述
当点击编辑时可以改变文本，点击取消则返回

代码如下

<!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>Document</title>
    <style>
        span{ margin-right:10px; }
        .updata{ display:none};
    </style>
</head>
<body>
    <ul>
        <li>
            <div>
                <span>白日依山尽</span><span>编辑</span>
            </div>
            <div class="updata">
               <input type="text">
               <span>保存</span>
               <span>取消</span>
            </div>
        </li>
        <li>
            <div>
                <span>黄河入海流</span><span>编辑</span>
            </div>
            <div class="updata">
                <input type="text">
                <span>保存</span>
                <span>取消</span>
            </div>
        </li>
        <li>
            <div>
                <span>欲穷千里目</span><span>编辑</span>
            </div>
            <div class="updata">
                <input type="text">
                <span>保存</span>
                <span>取消</span>
            </div>
        </li>
        <li>
            <div>
                <span>更上一层楼</span><span>编辑</span>
            </div>
            <div class="updata">
                <input type="text">
                <span>保存</span>
                <span>取消</span>
            </div>
        </li>
    </ul>
    <script>
        var ali = document.getElementsByTagName('li')
        for(var i=0; i<ali.length;i++){
            fn(ali[i]) 
        }
       
        function fn(lis){
            var odiv = lis.getElementsByTagName('div')
            var ospan = odiv[0].getElementsByTagName('span')
            var uspan = odiv[1].getElementsByTagName('span')
            var oinp =  odiv[1].getElementsByTagName('input')[0]
            ospan[1].onclick = function(){
                odiv[0].style.display = 'none';
                odiv[1].style.display = 'block';
                oinp.value = ospan[0].innerHTML
            }
            uspan[0].onclick = function(){
                dis()
                ospan[0].innerHTML= oinp.value
            }
            uspan[1].onclick = function(){
                dis()
            }
            function dis(){
                odiv[0].style.display = 'block';
                odiv[1].style.display = 'none';
            }
        }
       

    </script>
</body>
</html>