我想创建一个简单的所见即所得，我想要的选项之一是添加一个复选框列表，很像一个无序列表，但在每个元素的开头都有复选框。
我的主要想法是使用 javascript document.execCommand 编辑带有 contentEditable div 的 WYSIWYG 框，很像这个:http://www.quirksmode.org/dom/execCommand/
但是当我为复选框列表创建一个按钮时，我仍然不知道如何创建一个与 ul 具有相同行为的按钮，通过按 enter 键并在双击输入时停止来生成新按钮。有什么想法吗？
最佳答案
这应该像您所要求的那样工作，尽管可能需要对其进行编辑以反射(reflect)您真正想要对复选框列表执行的操作:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>test-page</title>
<script type="text/javascript">
//<!--
var bxs, clk, dv, lng, tx, spn, und;
function newone()
{ if(bxs == und) //if undefined do initialization stuff once
{ bxs = []; //array of checkboxes, accessible any time
clk = document.getElementById("clk"); //"click" message
dv = document.getElementById("addmore"); //"div" element
tx = document.getElementById("txbx"); //"textbox" element
}
lng = bxs.length; //current number of checkboxes
spn = document.createElement("span") //create a "span" element
spn.innerHTML = " "; //indent from left of page
bxs[lng] = document.createElement("input"); //create checkbox
bxs[lng].type = "checkbox";
spn.appendChild(bxs[lng]); //put it inside the "span" element
dv.insertBefore(spn, tx); //put the "span" element inside the "div"
tx.value = ""; //ensure textbox has no text
tx.hidden = false; //display the textbox
clk.hidden = true; //hide the "click" message
tx.focus(); //let user start typing in the textbox
return;
}
function tstkey(e)
{ if((e.keyCode == 13) && //Enter key pressed?
(tx.value.length > 2)) //check minimum entry length
{ spn.innerHTML += (tx.value + "<br />"); //finish current line
newone(); //create another checkbox
}
else if((e.keyCode == 27) || //Escape pressed?
((e.keyCode == 13) && //or
(tx.value.length == 0))) //blank entry?
{ dv.removeChild(spn); //remove last-added "span"
bxs.length = lng; //remove last-added checkbox
tx.hidden = true; //hide the textbox
clk.hidden = false; //display the "click" message
}
return;
}
// -->
</script>
</head>
<body>
<div id="addmore">
<input id="txbx" type="text" size="30" maxlength="50" hidden="hidden" onkeydown="tstkey(event);" /><br />
<span id="clk" onclick="newone();" style="background-color:#C0C0C0;">click to create a new checkbox item</span>
</div>
</body>
</html>
关于javascript - contentEditable div 中的复选框列表，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/26111259/