JavaScript创建项目符号和子项目符号

Question

 function f(){ $("#main").focus(); } $(document).ready(function(e) { $("#main").focus(); $("button").hide(); $("li").live("dblclick", function(){ var node = document.createElement("ul"); var node_li = document.createElement("li"); // Create a <li> node var textnode = document.createTextNode(""); // Create a text node node_li.appendChild(textnode); node.appendChild(node_li); // Append the text to <li> //document.getElementById("main").appendChild(node); $(this).append(node); //alert($(this).parent().children().index(this)); }) $('li').live('keypress',function(e){ var p = e.which; if(p==9){ var node = document.createElement("ul"); var node_li = document.createElement("li"); // Create a <li> node var textnode = document.createTextNode(""); // Create a text node node_li.appendChild(textnode); node.appendChild(node_li); // Append the text to <li> //document.getElementById("main").appendChild(node); $(this).append(node); } }); }); // $(".fb li").live function li_new(){ } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <script> </script> <p>Press "Enter for next lile" Double click on line for Sub-line.</p> <div class="currentlist" contenteditable="true" id="main" onBlur="f()" style="height:2000px;"> <li></li> </div> <input type="tel" style="position:fixed; margin-left:10000px"/> <div id="c"></div> 

我使用上面的代码创建项目符号项目。 双击

工作正常，但我想在

按Tab键，这是行不通的。

请通过按Enter键和按Tab键（如MS Word）给出添加列表和子列表的解决方案。 如果内容可编辑选项不能满足我的需求，请提供解决方案，如何创建和编辑项目符号和子项目符号并为其指定样式。

注意：我不想使用其他选项，如粗体，斜体等。 只需要使用Enter和Tab键的Bullet和Sub-bullet选项即可。

Answer 1

jQuery live()已过时，应改为使用on() 。 因为要动态创建列表元素，所以必须使用委托事件处理程序进行双击。

使用Tab键向子节点追加操作有点棘手。 您将必须手动找出光标位置。 我使用了Tim Down的答案到另一个问题的解决方案。

通过创建用于追加子节点的函数，我还使代码更加模块化。

您还拥有大量无用的注释代码。 在发布问题之前，请务必去除那些问题。 它使我们的工作更加轻松。

 function focus() { $("#main").focus(); } // returs the position of the cursor function getCursorPosition() { if (window.getSelection && window.getSelection().getRangeAt) { return window.getSelection().getRangeAt(0); } else if (document.selection && document.selection.createRange) { return document.selection.createRange(); } } // appends a new sub node to a given element function appendSubNode($el) { var node = document.createElement("ul"); var node_li = document.createElement("li"); // Create a <li> node var textnode = document.createTextNode(""); // Create a text node node_li.appendChild(textnode); node.appendChild(node_li); $($el).append(node); } $(document).ready(function (e) { $("#main").focus(); $("button").hide(); // a delegated event handler $(document).on('dblclick', 'li', function () { appendSubNode($(this)); }); $('.currentlist').on('keydown', function (e) { var p = e.which; if (p == 9) { e.preventDefault(); // find out where the cursor is var cursorPos = getCursorPosition(); appendSubNode(cursorPos.commonAncestorContainer); } }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <p>Press "Enter for next lile" Double click on line for Sub-line.</p> <div class="currentlist" contenteditable="true" id="main" onBlur="focus()" style="height:2000px;"> <ul> <li></li> </ul> </div> <input type="tel" style="position:fixed; margin-left:10000px" /> <div id="c"></div>