试试blog好不好用，发个两年前做的js表单设计器

本文链接：https://blog.csdn.net/emu_ston/article/details/26557

一共两个htm页面和两个js脚本文件。formCreate.htm是主页面。

formCreate.htm：

<CENTER style="font-size:23">表单设计器——新建表单
</CENTER>
<BR>
<input type=text id=xmlResult size=50>
<BR>
<CENTER>
  <button οnclick="addElement()"> 添加元素 </button>  
  <button οnclick="removeElement()" id="RemoveButton" disabled> 删除元素 </button>  
  <button οnclick="reclaimElement()" id="ReclaimButton" disabled> 回收元素 </button>  
  <button οnclick="document.location.reload()"> 重置 </button>  
  <button οnclick="window.xmlResult.value=output(window.bound1)"> 生成xml </button>  
  <button οnclick="window.bound1.innerHTML='';initialize(window.xmlResult.value);D_NewMouseUp();"> 重建 </button>
</CENTER>
<br><BR>
  表单模板名：<input type=text size=12 value="新表单">   
<div id="bound1" style="position: absolute;cursor: default; BACKGROUND-COLOR:ffffdd;" οnclick=selectedNone()>
</div>

<SCRIPT LANGUAGE="JavaScript">
<!--
var srcXmlString = "<0><elementLabel>姓名：</elementLabel><elementName>Title</elementName><elementType>text</elementType><elementLeft>22</elementLeft><elementTop>15</elementTop><elementSize>15</elementSize><elementValue>asdfg</elementValue></0>"+

"<1><elementName>gender</elementName><elementLabel>男</elementLabel><elementType>radio</elementType><elementLeft>252</elementLeft><elementTop>15</elementTop><elementChecked>checked</elementChecked></1>"+

"<2><elementName>gender</elementName><elementLabel>女</elementLabel><elementType>radio</elementType><elementLeft>322</elementLeft><elementTop>15</elementTop></2>"+

"<3><elementName>department</elementName><elementLabel>部门：</elementLabel><elementType>select-one</elementType><elementLeft>22</elementLeft><elementTop>55</elementTop><elementSize>120</elementSize><elementContent><option value='dept1'>工程部</option><option value='dept2'>财务部</option><option value='dept3' selected>人事部</option><option value='dept4'>后勤部</option></elementContent></3>"+

"<4><elementName>notification</elementName><elementLabel>备注</elementLabel><elementType>textarea</elementType><elementLeft>22</elementLeft><elementTop>100</elementTop><elementValue>asdfsdfs/ndfgasdf</elementValue><rows>7</rows><cols>63</cols></4>"+

"<5><elementName>fullMember</elementName><elementLabel>正式员工</elementLabel><elementType>checkbox</elementType><elementLeft>252</elementLeft><elementTop>55</elementTop><elementValue>full</elementValue><elementChecked>checked</elementChecked></5>"

var bgRectangle=new rectangle(10,200,500,300);

window.bound1.style.left=bgRectangle.left;
window.bound1.style.top=bgRectangle.top;
window.bound1.style.width=bgRectangle.width;
window.bound1.style.height=bgRectangle.height;

initialize(srcXmlString);

function initialize(src)
{
var elmArray = xmlToArray(src); //把xml串解析为数组，每个数组素表示一个表单元素

for (var i=0;i<elmArray.length;i++)
createElement(elmArray[i]);
}

D_NewMouseUp();//自动调整bound 的大小

//-->
</SCRIPT>
</body>

</html>

modifyElmAttr.htm：

<html>
<head>
<title>表单元素属性修改</title>
</head>
<body bgcolor="#EFEFDE" style="font-size:13">
<CENTER style="font-size:20">
表单元素属性修改
</CENTER>
<BR>
<BR>
<BLOCKQUOTE>
<BR>
元素标题：
<input type=text id=elmLabel><BR><BR>
元素类别
<select id="elmType" οnchange="showDiv(this.value)">
<option value="text">单行文字框</option>
<option value="textarea">多行文字区域</option>
<option value="select-one">选择框</option>
<option value="checkbox">多选框</option>
<option value="radio">单选框</option>
</select>
<BR><BR>
<div style="display:none" id="elmText">
文字框默认值：<input type=text id=textDefault></input><BR><BR>
文字框大小：<input type=text id=textSize value=20></input>
</div>

<div style="display:none" id="elmTextarea">
文字区域默认值：<BR><textarea id=textAreaDefault cols=50 rows=6></textarea><BR><BR>
文字区域大小：<input type=text id=textAreaRows size=8 value=5>行   <input type=text id=textAreaCols size=8 value=50>列
</div>

<div style="display:none" id="elmCheck">
多选框元素名：
<input type=text id=checkboxName></input>
<BR>
<BR>
多选框默认状态：<input type=checkbox id=checkboxChecked>选中</input>
<BR>
<BR>
多选框值：<input type=text id=checkboxValue></input>
</div>

<div style="display:none" id="elmRadio">
单选框元素名：
<input type=text id=radioName></input>
<BR>
<BR>
单选框默认状态：<input type=checkbox id=radioChecked>选中</input>
<BR>
<BR>
单选框值：<input type=text id=radioValue></input>
</div>

<div style="display:none" id="elmSelect">
选择框大小：<input type=text id=selectSize value=130><BR><BR>
选择框允许值：<BR><textarea id=selectValues cols=50 rows=6></textarea>
</div>
</BLOCKQUOTE>
<CENTER>
<button οnclick="window.close()"> 取消 </button>   <button type=submit οnclick="doChange()"> 完成 </button>
</CENTER></body>

<SCRIPT LANGUAGE="JavaScript">
<!--
window.elmLabel.value=dialogArguments.children[0].innerText;
var tmpelm;
/*
for (var i=0;i<dialogArguments.children.length;i++)
{
tmpelm = dialogArguments.children[i];
if (tmpelm.type=="text" || tmpelm.type=="select-one" || tmpelm.type=="textarea" || tmpelm.type=="checkbox" || tmpelm.type=="radio")
  break;
}
*/
tmpelm = dialogArguments.children[1];
var tmptype=tmpelm.type;
window.elmType.value=tmptype;
showDiv(tmptype,true);
function showDiv(tmptype,isFirstTime)
{
window.elmText.style.display="none";
window.elmSelect.style.display="none";
window.elmTextarea.style.display="none";
window.elmCheck.style.display="none";
window.elmRadio.style.display="none";

switch(tmptype)
  {
  case "text":
    window.elmText.style.display="";
    if (isFirstTime)
     {
     window.textDefault.value=tmpelm.value;
     window.textSize.value=tmpelm.size;
     }
    break;

   case "select-one":
    window.elmSelect.style.display="";
    if (isFirstTime)
     {
     window.selectSize.value=tmpelm.style.width;
     var tmpoptions = tmpelm.children;
     for (var i=0;i<tmpoptions.length;i++)
      selectValues.value +=tmpoptions[i].text+"/n";
     }
    break;

   case "textarea":
    window.elmTextarea.style.display="";
    if (isFirstTime)
     {
     window.textAreaDefault.value=tmpelm.value;
     window.textAreaRows.value=tmpelm.rows;
     window.textAreaCols.value=tmpelm.cols;
     }
    break;

   case "checkbox":
    window.elmCheck.style.display="";
    if (isFirstTime)
     {
     window.checkboxValue.value=tmpelm.value;
     window.checkboxChecked.checked=tmpelm.checked;
     window.checkboxName.value=tmpelm.name;
     }
    break;

   case "radio":
    window.elmRadio.style.display="";
    if (isFirstTime)
     {
     window.radioValue.value=tmpelm.value;
     window.radioChecked.checked=tmpelm.checked;
     window.radioName.value=tmpelm.name;
     }
    break;

   default:
    window.close();
    break;
  }
}

function doChange()
{
switch(window.elmType.value)
  {
  case "text":
   var tmpstr = "<SPAN>"+window.elmLabel.value+"</SPAN><INPUT TYPE=TEXT value=/""+window.textDefault.value+
   "/" size="+window.textSize.value+"></INPUT>";
   dialogArguments.innerHTML=tmpstr;
   break;

  case "select-one":
   tmpstr = "<SPAN>"+window.elmLabel.value+"</SPAN> <select style=/"width:"+window.selectSize.value+"/" disabled>";
    var tmpvalues = window.selectValues.value+unescape("%0D%0a");
    var tmpfrom = 0;
    for (var tmpto=tmpvalues.indexOf("/n",tmpfrom);tmpto>-1;tmpto=tmpvalues.indexOf("/n",tmpfrom))
     {
     var tmpsubstring = tmpvalues.substring(tmpfrom,tmpto-1);
     if (tmpsubstring.length>0)
      {
      tmpstr += "<option>"+tmpsubstring+"</option>";
      }
     tmpfrom=tmpto+1;
     }
   tmpstr +="</select>";
   dialogArguments.innerHTML=tmpstr;
   break;

  case "textarea":
   var tmpstr = "<DIV>"+window.elmLabel.value+"</DIV><textarea cols="+window.textAreaCols.value+" rows="+window.textAreaRows.value+">"+window.textAreaDefault.value+"</textarea>"
   dialogArguments.innerHTML=tmpstr;
   break;

  case "checkbox":
   var tmpstr = "<SPAN>"+window.elmLabel.value+"</SPAN><INPUT TYPE=checkbox value=/""+window.checkboxValue.value+
   "/" name= /"" + checkboxName.value+"/""+((window.checkboxChecked.checked)?" checked ":"")+"></INPUT>";
   dialogArguments.innerHTML=tmpstr;
   break;

  case "radio":
   var tmpstr = "<SPAN>"+window.elmLabel.value+"</SPAN><INPUT TYPE=radio value=/""+window.radioValue.value+
   "/" name= /"" + radioName.value+"/""+((window.radioChecked.checked)?" checked ":"")+"></INPUT>";
   dialogArguments.innerHTML=tmpstr;
   break;

  default:
   break;
  }
  window.close();

}

//-->
</SCRIPT>
</html>

movable.js：

var Mouse_Obj="none";
var pX
var pY
var ElmRecycle=new Array();
document.οnmοusemοve=D_NewMouseMove;
document.οnmοuseup=D_NewMouseUp;

function moveObj(c_Obj)
{ Mouse_Obj=c_Obj;
pX=parseInt(Mouse_Obj.style.left)-event.x;
pY=parseInt(Mouse_Obj.style.top)-event.y; }

var tmpdivs =window.bound1.children;
var maxY = 120
for (var i=0;i<tmpdivs.length; i++)
  {
  tmpdiv = tmpdivs[i];
  if (maxY < tmpdiv.offsetHeight+tmpdiv.offsetTop)
   maxY=tmpdiv.offsetHeight+tmpdiv.offsetTop;
  }
window.bound1.style.height = maxY+10;

}

function clearSelectedSign()
{
var tmpdivs = window.bound1.children;
for (var i=0;i<tmpdivs.length;i++)
  {
  tmpdivs[i].isSelected = false;
  tmpdivs[i].style.background=window.bound1.style.background;
  }
  window.RemoveButton.disabled=true;
}

function selected(tmpdiv)
{
  clearSelectedSign()
  if (tmpdiv==null) return;
  tmpdiv.isSelected = true;
  tmpdiv.style.background="#CCFFFF";
  window.RemoveButton.disabled=false;
}
function selectedNone()
{
if (event.srcElement == window.bound1)
  clearSelectedSign()
}

function removeElement()
{
var tmpdivs = window.bound1.children;
for (var i=0;i<tmpdivs.length;i++)
  if (tmpdivs[i].isSelected)
   {
//   ElmRecycle.push( window.bound1.removeChild(tmpdivs[i]));
   ElmRecycle[ElmRecycle.length]=window.bound1.removeChild(tmpdivs[i]);
   window.ReclaimButton.disabled=false;
   }
selected(window.bound1.children[window.bound1.children.length-1]);
D_NewMouseUp();
}

function reclaimElement()
{
// window.bound1.appendChild(ElmRecycle.pop());
window.bound1.appendChild(ElmRecycle[ElmRecycle.length-1]);ElmRecycle.length--;
if (window.bound1.children.length > 0)
selected(window.bound1.children[window.bound1.children.length-1]);
window.ReclaimButton.disabled=(ElmRecycle.length==0);
D_NewMouseUp();
}

function addElement()
{
window.bound1.innerHTML += "<div style='position:absolute; cursor: hand; left:0; top:0; display:block; z-index:1' οnclick='selected(this)' onMouseDown=moveObj(this) ondblClick=/"showModalDialog('modifyElmAttr.htm',this);D_NewMouseUp()/" ><span>新元素</span><input type=text style=‘cursor: hand’></div>";
selected(window.bound1.children[window.bound1.children.length-1]);
D_NewMouseUp();
}

function rectangle(left,top,width,height)
{
this.left=left;
this.top=top;
this.width=width;
this.height=height;
this.right=left+width;
this.bottom=top+height;
}

function createElement(xmlString)
{
  var label =searchXMLstring(xmlString,"elementLabel");
var name=searchXMLstring(xmlString,"elementName");
var type=searchXMLstring(xmlString,"elementType");
var left =searchXMLstring(xmlString,"elementLeft");
var top =searchXMLstring(xmlString,"elementTop");
var value =searchXMLstring(xmlString,"elementValue");
if (value==null) value="";
if (type=="text")
  {
  var size =searchXMLstring(xmlString,"elementSize");
  if (value==null) value="";
  if (size==null) size="20";
  window.bound1.innerHTML += "<div style='position:absolute; cursor: hand; left:"+left+"; top:"+top+
   "; display:block; z-index:1' οnclick='selected(this)' onMouseDown=moveObj(this) "+
   "ondblClick=/"showModalDialog('modifyElmAttr.htm',this);D_NewMouseUp()/" >"+
    "<span>"+label+"</span><input type=text name='"+name+"' style=‘cursor: hand’ size="+size+" value='"+value+"'></div>";
  }
else if (type=="radio")
  {
  if (value==null) value=name;
  var checked =searchXMLstring(xmlString,"elementChecked");
  if (checked !="checked") checked="";

xmlFunctions.js：

function searchXMLstring(src,searchfor)
{
var start="<"+searchfor+">";
var end="</"+searchfor+">";
var a=src.indexOf(start);
var b=src.indexOf(end);
if (a<0 || b<0) return null;
a+=start.length;
return src.substring(a,b);
}

function xmlToArray(src)
{
var i=0;
var result = new Array();
while (searchXMLstring(src,i) != null)
  {
//  result.push(searchXMLstring(src,i));
  result[result.length]=searchXMLstring(src,i);
  i++;
  }
return result;
}