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 键，它不起作用。

请给出一个添加列表和子列表的解决方案，像 MS Word 一样按 Enter 键和 Tab 键。如果内容可编辑选项不符合我的要求，请提供解决方案，我该如何创建和编辑项目符号和子项目符号并赋予它们样式。

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

Answer 1

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

使用 tab 键附加子节点有点棘手。您将不得不手动找出光标位置。我使用了来自 Tim Down 的 answer 的解决方案来解决另一个问题。

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

您还有大量无用和注释的代码。在发布问题之前始终摆脱那些。它使我们的工作变得容易得多。

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>