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

2024-04-27 13:58:14

字体：大中小

来源：转载

供稿：网友

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

<html><head><title>用<a href="http://www.vevb.com/article.asp?typeid=36">Javascript</a>自动生成各种表单vevb.com</title><style type="text/<a href="http://www.vevb.com/article.asp?typeid=38">CSS</a>">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("请输入要生成的表单个数!/n/t^_^");}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>

上一篇：输入框input响应鼠标的变化[网页特效]

下一篇：相似内容的一种最简处理办法