[英]How to make <li> editable on click?
I have a menu that looks like this:我有一个看起来像这样的菜单:
I want to make it possible that when the user clicks on +
the <li>
element that it's located inside becomes like an editable input form, where a new menu item name can be created and saved (by entering the name and clicking Enter).我想让当用户点击
+
它位于里面的<li>
元素成为可能,就像一个可编辑的输入表单,可以在其中创建和保存新的菜单项名称(通过输入名称并单击 Enter)。
The code of the current item is当前项目的代码是
<li id="addNewContext" class="menu-item-divided"><a href="javascript:">+</a></li>
Is there a snippet of code I could use to make that field editable that could save the name entered into an array, which I can then use to repopulate the menu?是否有一段代码可以用来使该字段可编辑,可以将输入的名称保存到数组中,然后我可以使用它来重新填充菜单?
Thanks!谢谢!
HTML5 allows for a ContentEditable attribute to be added to any HTML element. HTML5 允许将 ContentEditable 属性添加到任何 HTML 元素。 Assign a function to the onclick event for the list item, and make it set the ContentEditable attribute to true.
为列表项的 onclick 事件分配一个函数,并使其将 ContentEditable 属性设置为 true。
https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Content_Editable 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 as well: http://jsfiddle.net/b8m35wwk/1/ JSFiddle 也是: http : //jsfiddle.net/b8m35wwk/1/
I want to make it possible that when the user clicks on + the
<li>
element that it's located inside becomes like an editable input form, where a new menu item name can be created and saved (by entering the name and clicking Enter).我想让当用户单击 + 它位于其中的
<li>
元素时变得像一个可编辑的输入表单,可以在其中创建和保存新的菜单项名称(通过输入名称并单击 Enter)。
This sample also remove +
sign on click:此示例还删除
+
登录单击:
$('#addNewContext') // on click, make content editable. .click(function() { $(this).html("").attr('contenteditable', 'true'); }) // on hit enter, .keyup(function(e) { if (e.keyCode == 13) { var val = $(this).text(); $(this) // create a new li item .before("<li>" + val + "</li>") // set plus sign again .html("+") // make contenteditable to false, when clicked the process start again. .attr('contenteditable', 'false'); e.preventDefault(); } });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <ul> <li>not edit me</li> <li>not edit me</li> <li>not edit me</li> <li>not edit me</li> <li id="addNewContext" class="menu-item-divided">+</li> </ul>
You can use contentEditable您可以使用 contentEditable
let list_1_e = document.getElementById('addNewContext'); list_1_e.contentEditable = true;
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.