标签span切换成可修改内容的input 详情

最新推荐文章于 2024-07-19 09:37:17 发布

原创

最新推荐文章于 2024-07-19 09:37:17 发布 · 2.8k 阅读

7 ·

CC 4.0 BY-SA版权

文章标签：

#tags #input

本文介绍了如何将标签span转换为可编辑的input。在点击标签时，它会变为一个输入框，允许用户修改内容，同时删除图标会隐藏。当鼠标失去焦点时，删除图标重新出现。提供了相关代码实现这一功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

今天是12月的第二天，我们一起来看看有关于标签的切换吧！
首先先上效果图：
在这里插入图片描述
这里是一个span标签，关于标签的生成，这一章暂时不说，后面我会专门出一篇来介绍。

现在要实现的就是，当我们点击这个标签时，让他切换成input，可修改内容的状态，同时后面的删除标志消失，鼠标失去焦点是删除标志再次出现。

废话不多说，直接上代码，可在真机上显示效果。

引用jquery.min.js和部分css样式：

<script src="./js/jquery.min.js"></script>
    <style>
        .all{
   
   
          border:1px solid #a89b9b;
        }
    </style>

body内容和javascript代码：


<div class="result_wrap">
                <div class="result_content">
                        <table class="list_tab">       
                            <tr>
                                <th class="all"