gpt4 book ai didi

javascript - 如何使
  • 在点击时可编辑?
  • 转载 作者:太空狗 更新时间:2023-10-29 12:33:43 25 4
    gpt4 key购买 nike

    我有一个看起来像这样的菜单:

    enter image description here

    我想让当用户点击 + 时成为可能<li>它位于内部的元素变得像一个可编辑的输入表单,可以在其中创建和保存新的菜单项名称(通过输入名称并单击 Enter)。

    当前商品的编码为

    <li id="addNewContext" class="menu-item-divided"><a href="javascript:">+</a></li>

    是否有一段代码可以用来使该字段可编辑,可以将输入的名称保存到一个数组中,然后我可以用它来重新填充菜单?

    谢谢!

    最佳答案

    HTML5 允许将 ContentEditable 属性添加到任何 HTML 元素。为列表项的 onclick 事件分配一个函数,并将 ContentEditable 属性设置为 true。

    https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Content_Editable

    var list = document.querySelector('ul');
    var editList = document.querySelector('.edit-list');

    editList.onclick = function() {

    //or you can use list.setAttribute("contentEditable", true);
    list.contentEditable = true;

    }
    <ul>
    <li>list item</li>
    <li>List item</li>
    <li>List item</li>
    <li>List item</li>
    <li>List item</li>
    <li><span class="edit-list">+</span>
    </li>

    </ul>

    还有 JSFiddle:http://jsfiddle.net/b8m35wwk/1/

    关于javascript - 如何使 <li> 在点击时可编辑?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27476566/

    25 4 0
    Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
    广告合作:1813099741@qq.com 6ren.com