ContentEditable div中的複選框列表

我想創建一個簡單的wysiwyg，我希望其中一個選項是添加複選框列表，很像無序列表，但在每個元素的開頭都有複選框。ContentEditable div中的複選框列表

我的主要想法是使用JavaScript的document.execCommand與CONTENTEDITABLE div來編輯所見即所得的盒子，就像這樣：http://www.quirksmode.org/dom/execCommand/

但是，當我創建一個CheckBoxList的一個按鈕，我仍然沒有關於如何創建一個與ul具有相同行爲的想法，通過按Enter鍵並停止雙輸入生成新的。有任何想法嗎？

來源

2014-09-30 raphadko

這應該像你所問的工作，儘管它可能需要修改，以反映你真的想與你的複選框的列表做：

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

來源

2014-09-30 09:31:15 vernonner3voltazim

ContentEditable div中的複選框列表

回答

相關問題