Question

＆＃13;

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(){

}

＆＃13;

<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>

＆＃13;

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

工作正常，但我想通过按Tab键在

下创建新的，但它不起作用。

请输入添加列表和子列表的解决方案，按Enter键并按Tab键，如MS Word。如果内容可编辑选项不符合我的要求，请提供一个解决方案，我如何创建和编辑子弹和子项目项目并给它们风格。

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

Answer 1

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

使用tab键添加子节点有点棘手。您必须手动找出光标位置。我使用Tim Down的answer解决方案来解决另一个问题。

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

你还有大量无用的评论代码。在发布问题之前总是摆脱那些。它使我们的工作变得更加轻松。

＆＃13;

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);
        }
    });

});

＆＃13;

<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>

＆＃13;

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

1 个答案: