Question

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

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

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

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

contentEditable div中的复选框列表

1 个答案: