contentEditable div 中的复选框列表答案

【问题标题】：List of checkboxes in a contentEditable divcontentEditable div 中的复选框列表
【发布时间】：2014-11-24 12:23:49
【问题描述】：

我想创建一个简单的所见即所得，我希望其中一个选项是添加一个复选框列表，很像一个无序列表，但在每个元素的开头都有复选框。

我的主要想法是使用 javascript document.execCommand 来编辑带有 contentEditable div 的 WYSIWYG 框，就像这个：http://www.quirksmode.org/dom/execCommand/

但是当我为复选框列表创建一个按钮时，我仍然不知道如何创建一个与 ul 具有相同行为的按钮，通过按 enter 并在双输入时停止来生成新按钮。有什么想法吗？

【问题讨论】：

标签： javascript jquery html css checkbox

【解决方案1】：

这应该像您所要求的那样工作，尽管可能需要对其进行编辑以反映您真正想要对复选框列表执行的操作：

<!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 = "&nbsp; &nbsp;";     //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>

【讨论】：