您當前位置：首頁 > web前端 > htmlcss > 表單中的隱藏域重置

表單中的隱藏域重置

來源：程序員人生發(fā)布時間：2013-10-23 04:04:44 閱讀次數(shù)：3065次

在 DOM 中，表單重置非常簡單，使用 <input type=”reset”> 或者 <button type=”reset”> 即可。原生 DOM 也提供了 reset() 方法用于表單重置。

但是在 Firefox/Chrome 瀏覽器中，如果字段是隱藏域（type=”hidden”）的話，使用 reset 是無法將字段值還原為初始值的。但在 IE6/7/8 中都可以重置。查看這個示例：

<!doctype html><html><head><title>表單中的隱藏域重置</title><style>html{color:#000;background:#fff}body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td{margin:0;padding:0}table{border-collapse:collapse;border-spacing:0}fieldset,img{border:0}address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal}li{list-style:none}caption,th{text-align:left}h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal}q:before,q:after{content:''}abbr,acronym{border:0;font-variant:normal}sup{vertical-align:text-top}sub{vertical-align:text-bottom}input,textarea,select{font-family:inherit;font-size:inherit;font-weight:inherit}input,textarea,select{*font-size:100%}legend{color:#000}body{font:12px/1.5 '9ed14f53',arial;padding:2em}h1{font-size:18px}h2{font-size:16px;color:green;padding:1em0}ol{margin:10px0 10px 2em}olli{list-style:decimal;line-height:1.8}th,td{border:1pxsolid #ddd;padding:2px5px;font-size:12px}th{font-weight:bold;background:#eee}.clearfix:after{content:'20';display:block;height:0;clear:both}.clearfix{zoom:1}</style><meta http-equiv="Content-Type" content="text/html; charset=gbk"></head><body><h1>表單中的隱藏域重置</h1><form><h2>表單中的隱藏域重置</h2><input type="hidden" value="123" id="JS_hidden"><input type="text" value="text value" id="JS_text"><button type="button" id="JS_button">獲取隱藏域的值，默認為"123"</button><button type="button" id="JS_write">將隱藏域的值改寫為"abc"</button><button type="reset">重置表單</button></form><script>document.getElementById('JS_button').onclick = function(){alert('隱藏域的值為：' + document.getElementById('JS_hidden').value);}document.getElementById('JS_write').onclick = function(){document.getElementById('JS_hidden').value = 'abc';alert('隱藏域的值為：' + document.getElementById('JS_hidden').value);}</script></body></html> <br /><center>如不能顯示效果，請按Ctrl+F5刷新本頁，更多網頁代碼：<a href='http://www.vxbq.cn/' target='_blank'>http://www.vxbq.cn/</a></center>
提示：可修改后代碼再運行!

目前想到的一個解決方案是：

<input type="text" style="display:none;">

生活不易，碼農辛苦
如果您覺得本網站對您的學習有所幫助,可以手機掃描二維碼進行捐贈
程序員人生

------分隔線----------------------------

上一篇 新站如何讓百度收錄更快 9個方法來幫你

下一篇 十二個影響SEO價格的常見因素分析

分享到:

------分隔線----------------------------

為碼而活

積分：4237

15粉絲

7關注

欄目熱點

多多色-多人伦交性欧美在线观看-多人伦精品一区二区三区视频-多色视频-免费黄色视屏网站-免费黄色在线

表單中的隱藏域重置