鼠标点击input框后里面的内容就消失

dn001 2009-06-21 08:35:48

用Javascript自动生成的各种表单特效代码，自动生成表单的网页特效

<html> <head> <title>用Javascript自动生成各种表单knowsky.com</title> <style type="text/css"> body{ } div{ border:1 solid silver; width:300px; height:350px; padding:px; font-size:12px; color:green; position:absolute; left:0px; top:0px; padding-top:10px; } textarea{ position:absolute; left:310px; top:0px; width:400px; height:300px; color:maroon; } input{ font-size:12px; } .NUM{ width:30px; border:1 solid #000; height:20px; } .opt{ font-size:11px; border:1 solid red; width:100px; height:20px; } </style> <script type="text/javascript" defer="defer"> function Make_Code(){ //code_value.value=""; var obj=document.getElementsByTagName("form")[0]; var n=obj.elements[0].value; //表单的个数; if(n==""){ alert("请输入要生成的表单个数!nt^_^"); } n=Number(n); var sel_value=obj.elements[1].options[obj.elements[1].selectedIndex].value; //表单类型; //alert(n+" : "+typeof n+"n"+sel_value); code_value.value+="<form>"; for(var i=0;i<n;i++){ if(sel_value=="image"){ obj.elements[3].style.display="block"; var img_src=obj.elements[3].value; code_value.value+="<input type=""+sel_value+"" name=""+sel_value+"_"+i+"" src=""+img_src+"" />"; } else if(sel_value=="radio"){ code_value.value+="<input type=""+sel_value+"" name=""+sel_value+"_"+n+"" />"+sel_value+"_"+i+" "; } else if(sel_value=="checkbox"){ code_value.value+="<input type=""+sel_value+"" name=""+sel_value+"_"+i+"" />"+sel_value+"_"+i+" "; } else if(sel_value=="text"){ code_value.value+=sel_value+"_"+i+" : <input type=""+sel_value+"" name=""+sel_value+"_"+i+"" /><br>"; } else{ code_value.value+="<input type=""+sel_value+"" name=""+sel_value+"_"+i+"" value=""+sel_value+"_"+i+"" />  "; } } code_value.value+="</form>"; } function run_code(){ var win_code=window.open("","new_win",""); win_code.document.writeln(code_value.value); win_code.document.close(); } function check_type(){ var obj=document.getElementsByTagName("form")[0]; if(obj.elements[1].value=="image"){ obj.elements[3].style.display="block"; } else{ obj.elements[3].style.display="none"; } } </script> </head> <body> <div> <form> <center><h3>自动生成表单</h3></center> 表单个数:<input type="text" class="NUM" /> 表单类型: <select class="opt" onChange="check_type()"> <option value="file" checked>file <option value="text">text <option value="button">button <option value="image">image <option value="radio">radio <option value="checkbox">checkbox <option value="reset">reset <option value="submit">submit </select>  <button onclick="Make_Code()" style="height:22px;padding:0px;width:50px;">确定</button><br> <input type="file" style="width:300px;display:none;" /> </form> </div> <textarea id="code_value"> </textarea> <div id="buttons" style="text-align:center;padding-top:10px;width:400px;height:50px;position:absolute;left:310px;top:300px"> <button onclick="run_code()">运行代码</button> <button onclick="code_value.value='';">清除代码</button> </div> </body> </html>