JavaScript create bullet and sub-bullet item

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>

I use above code for create bullet item. Double click on

is work fine but I want to create new under

by press tab key and it's not work.

Please give a solution of add list and sub-list with press Enter Key and Press Tab key like MS Word. If content editable option is not good for what I want please give a solution how can I create and edit Bullet and sub-bullet item and give them style.

NOTE: I don't want use other option like bold, italic ect. Only need Bullet and Sub-bullet option using Enter and Tab Key.

Answer 1

jQuery live() is deprecated, you should use on() instead. Because you're creating the list elements dynamically, you have to use delegated event handler for the double click.

Appending a sub node with a tab key is a bit tricky. You will have to find out the cursors position manually. I used a solution from an answer by Tim Down to another question.

I also made the code more modular by creating a function for appending the sub nodes.

You also had tons of useless and commented code. Always get rid of those before posting a question. It makes the work a lot easier for us.

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>