标签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。在点击标签时，它会变为一个输入框，允许用户修改内容，同时删除图标会隐藏。当鼠标失去焦点时，删除图标重新出现。提供了相关代码实现这一功能。

今天是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">
                                    <span class="res">标签</span>
                                    <i class="one">&times;</i>
                                </th>
                            </tr>
                        </table>
                    </div>
            </div>
    </form>
    <script>
        $('.res').click(function () {
            $(".one").hide()
            var th = $(this);
            var html = th.html();
            var input = $("<input type='text' value='" + html + "'/>");
            th.html(input);//附上input
            //再次点击不变
            input.click(function () { return false; });
            //自动获取焦点 
            input.trigger("focus");
            //文本框失去焦点变回来
            input.blur(function () {
                $(".one").show()
                var val = $(this).val();
                if (val != html) {
                    th.html(val);
                } else {
                    th.html(val);
                }
            })
        })
    </script>