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;
我使用上面的代码来创建项目符号。双击
请输入添加列表和子列表的解决方案,按Enter键并按Tab键,如MS Word。如果内容可编辑选项不符合我的要求,请提供一个解决方案,我如何创建和编辑子弹和子项目项目并给它们风格。
注意:我不想使用其他选项,如粗体,斜体等。只需使用Enter和Tab键就可以使用Bullet和Sub-bullet选项。
答案 0 :(得分:0)
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);
}
});
});
&#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;