select readonly

 

让html select支持readonly属性

2011-03-18 10:51 5720人阅读 评论(4) 收藏 举报

html

刚刚碰到一个要为html select添加readonly属性的要求，可是select是不支持readonly属性的，找了找，方法还是有的，不过大都比较麻烦。以下的方法个人认为是最简单的：

<div class="dp-highlighter bg_xhtml" style="font-family: Consolas, 'Courier New', Courier, mono, serif; font-size: 12px; width: 700.90625px; overflow: auto; padding-top: 1px; margin: 18px 0px !important; background-color: rgb(231, 229, 220);"><div class="bar" style="color: rgb(51, 51, 51); line-height: 26px; padding-left: 45px;"><div class="tools" style="padding: 3px 8px 10px 10px; font-size: 9px; line-height: normal; font-family: Verdana, Geneva, Arial, Helvetica, sans-serif; color: silver; border-left-width: 3px; border-left-style: solid; border-left-color: rgb(108, 226, 108); background-color: rgb(248, 248, 248);"><strong>[xhtml]</strong> <a target=_blank href="http://blog.csdn.net/unicode/article/details/6258379#" class="ViewSource" title="view plain" style="color: rgb(160, 160, 160); text-decoration: none; border: none; padding: 1px; margin: 0px 10px 0px 0px; font-size: 9px; display: inline-block; width: 16px; height: 16px; text-indent: -2000px; background-image: url(http://static.blog.csdn.net/scripts/SyntaxHighlighter/styles/images/default/ico_plain.gif); background-attachment: initial; background-color: inherit; background-size: initial; background-origin: initial; background-clip: initial; background-position: 0% 0%; background-repeat: no-repeat;">view plain</a><a target=_blank href="http://blog.csdn.net/unicode/article/details/6258379#" class="CopyToClipboard" title="copy" style="color: rgb(160, 160, 160); text-decoration: none; border: none; padding: 1px; margin: 0px 10px 0px 0px; font-size: 9px; display: inline-block; width: 16px; height: 16px; text-indent: -2000px; background-image: url(http://static.blog.csdn.net/scripts/SyntaxHighlighter/styles/images/default/ico_copy.gif); background-attachment: initial; background-color: inherit; background-size: initial; background-origin: initial; background-clip: initial; background-position: 0% 0%; background-repeat: no-repeat;">copy</a><div style="position: absolute; left: 842px; top: 485px; width: 18px; height: 18px; z-index: 99;"></div></div></div><ol start="1" class="dp-xml" style="color: rgb(92, 92, 92); line-height: 26px; padding: 0px; border: none; list-style-position: initial; list-style-image: initial; margin: 0px 0px 1px 45px !important; background-color: rgb(255, 255, 255);"><li class="alt" style="border-style: none none none solid; border-left-width: 3px; border-left-color: rgb(108, 226, 108); list-style: decimal-leading-zero outside; color: inherit; line-height: 18px; margin: 0px !important; padding: 0px 3px 0px 10px !important;"><span style="margin: 0px; padding: 0px; border: none; color: black; background-color: inherit;"><span class="tag" style="margin: 0px; padding: 0px; border: none; color: rgb(153, 51, 0); font-weight: bold; background-color: inherit;"><</span><span class="tag-name" style="margin: 0px; padding: 0px; border: none; color: rgb(153, 51, 0); font-weight: bold; background-color: inherit;">select</span><span style="margin: 0px; padding: 0px; border: none; background-color: inherit;"> </span><span class="attribute" style="margin: 0px; padding: 0px; border: none; color: red; background-color: inherit;">id</span><span style="margin: 0px; padding: 0px; border: none; background-color: inherit;">=</span><span class="attribute-value" style="margin: 0px; padding: 0px; border: none; color: blue; background-color: inherit;">"lstTest"</span><span style="margin: 0px; padding: 0px; border: none; background-color: inherit;"> </span><span class="attribute" style="margin: 0px; padding: 0px; border: none; color: red; background-color: inherit;">onfocus</span><span style="margin: 0px; padding: 0px; border: none; background-color: inherit;">=</span><span class="attribute-value" style="margin: 0px; padding: 0px; border: none; color: blue; background-color: inherit;">"this.defaultIndex=this.selectedIndex;"</span><span style="margin: 0px; padding: 0px; border: none; background-color: inherit;"> </span><span class="attribute" style="margin: 0px; padding: 0px; border: none; color: red; background-color: inherit;">onchange</span><span style="margin: 0px; padding: 0px; border: none; background-color: inherit;">=</span><span class="attribute-value" style="margin: 0px; padding: 0px; border: none; color: blue; background-color: inherit;">"this.selectedIndex=this.defaultIndex;"</span><span class="tag" style="margin: 0px; padding: 0px; border: none; color: rgb(153, 51, 0); font-weight: bold; background-color: inherit;">></span><span style="margin: 0px; padding: 0px; border: none; background-color: inherit;">  </span></span></li><li style="border-style: none none none solid; border-left-width: 3px; border-left-color: rgb(108, 226, 108); list-style: decimal-leading-zero outside; line-height: 18px; margin: 0px !important; padding: 0px 3px 0px 10px !important; background-color: rgb(248, 248, 248);"><span style="margin: 0px; padding: 0px; border: none; color: black; background-color: inherit;"><span class="tag" style="margin: 0px; padding: 0px; border: none; color: rgb(153, 51, 0); font-weight: bold; background-color: inherit;"><</span><span class="tag-name" style="margin: 0px; padding: 0px; border: none; color: rgb(153, 51, 0); font-weight: bold; background-color: inherit;">option</span><span style="margin: 0px; padding: 0px; border: none; background-color: inherit;"> </span><span class="attribute" style="margin: 0px; padding: 0px; border: none; color: red; background-color: inherit;">value</span><span style="margin: 0px; padding: 0px; border: none; background-color: inherit;">=</span><span class="attribute-value" style="margin: 0px; padding: 0px; border: none; color: blue; background-color: inherit;">"1"</span><span class="tag" style="margin: 0px; padding: 0px; border: none; color: rgb(153, 51, 0); font-weight: bold; background-color: inherit;">></span><span style="margin: 0px; padding: 0px; border: none; background-color: inherit;">test1</span><span class="tag" style="margin: 0px; padding: 0px; border: none; color: rgb(153, 51, 0); font-weight: bold; background-color: inherit;"></</span><span class="tag-name" style="margin: 0px; padding: 0px; border: none; color: rgb(153, 51, 0); font-weight: bold; background-color: inherit;">option</span><span class="tag" style="margin: 0px; padding: 0px; border: none; color: rgb(153, 51, 0); font-weight: bold; background-color: inherit;">></span><span style="margin: 0px; padding: 0px; border: none; background-color: inherit;">  </span></span></li><li class="alt" style="border-style: none none none solid; border-left-width: 3px; border-left-color: rgb(108, 226, 108); list-style: decimal-leading-zero outside; color: inherit; line-height: 18px; margin: 0px !important; padding: 0px 3px 0px 10px !important;"><span style="margin: 0px; padding: 0px; border: none; color: black; background-color: inherit;"><span class="tag" style="margin: 0px; padding: 0px; border: none; color: rgb(153, 51, 0); font-weight: bold; background-color: inherit;"><</span><span class="tag-name" style="margin: 0px; padding: 0px; border: none; color: rgb(153, 51, 0); font-weight: bold; background-color: inherit;">option</span><span style="margin: 0px; padding: 0px; border: none; background-color: inherit;"> </span><span class="attribute" style="margin: 0px; padding: 0px; border: none; color: red; background-color: inherit;">value</span><span style="margin: 0px; padding: 0px; border: none; background-color: inherit;">=</span><span class="attribute-value" style="margin: 0px; padding: 0px; border: none; color: blue; background-color: inherit;">"2"</span><span class="tag" style="margin: 0px; padding: 0px; border: none; color: rgb(153, 51, 0); font-weight: bold; background-color: inherit;">></span><span style="margin: 0px; padding: 0px; border: none; background-color: inherit;">test2</span><span class="tag" style="margin: 0px; padding: 0px; border: none; color: rgb(153, 51, 0); font-weight: bold; background-color: inherit;"></</span><span class="tag-name" style="margin: 0px; padding: 0px; border: none; color: rgb(153, 51, 0); font-weight: bold; background-color: inherit;">option</span><span class="tag" style="margin: 0px; padding: 0px; border: none; color: rgb(153, 51, 0); font-weight: bold; background-color: inherit;">></span><span style="margin: 0px; padding: 0px; border: none; background-color: inherit;">  </span></span></li><li style="border-style: none none none solid; border-left-width: 3px; border-left-color: rgb(108, 226, 108); list-style: decimal-leading-zero outside; line-height: 18px; margin: 0px !important; padding: 0px 3px 0px 10px !important; background-color: rgb(248, 248, 248);"><span style="margin: 0px; padding: 0px; border: none; color: black; background-color: inherit;"><span class="tag" style="margin: 0px; padding: 0px; border: none; color: rgb(153, 51, 0); font-weight: bold; background-color: inherit;"><</span><span class="tag-name" style="margin: 0px; padding: 0px; border: none; color: rgb(153, 51, 0); font-weight: bold; background-color: inherit;">option</span><span style="margin: 0px; padding: 0px; border: none; background-color: inherit;"> </span><span class="attribute" style="margin: 0px; padding: 0px; border: none; color: red; background-color: inherit;">value</span><span style="margin: 0px; padding: 0px; border: none; background-color: inherit;">=</span><span class="attribute-value" style="margin: 0px; padding: 0px; border: none; color: blue; background-color: inherit;">"3"</span><span style="margin: 0px; padding: 0px; border: none; background-color: inherit;"> </span><span class="attribute" style="margin: 0px; padding: 0px; border: none; color: red; background-color: inherit;">selected</span><span style="margin: 0px; padding: 0px; border: none; background-color: inherit;">=</span><span class="attribute-value" style="margin: 0px; padding: 0px; border: none; color: blue; background-color: inherit;">"selected"</span><span class="tag" style="margin: 0px; padding: 0px; border: none; color: rgb(153, 51, 0); font-weight: bold; background-color: inherit;">></span><span style="margin: 0px; padding: 0px; border: none; background-color: inherit;">test3</span><span class="tag" style="margin: 0px; padding: 0px; border: none; color: rgb(153, 51, 0); font-weight: bold; background-color: inherit;"></</span><span class="tag-name" style="margin: 0px; padding: 0px; border: none; color: rgb(153, 51, 0); font-weight: bold; background-color: inherit;">option</span><span class="tag" style="margin: 0px; padding: 0px; border: none; color: rgb(153, 51, 0); font-weight: bold; background-color: inherit;">></span><span style="margin: 0px; padding: 0px; border: none; background-color: inherit;">  </span></span></li><li class="alt" style="border-style: none none none solid; border-left-width: 3px; border-left-color: rgb(108, 226, 108); list-style: decimal-leading-zero outside; color: inherit; line-height: 18px; margin: 0px !important; padding: 0px 3px 0px 10px !important;"><span style="margin: 0px; padding: 0px; border: none; color: black; background-color: inherit;"><span class="tag" style="margin: 0px; padding: 0px; border: none; color: rgb(153, 51, 0); font-weight: bold; background-color: inherit;"><</span><span class="tag-name" style="margin: 0px; padding: 0px; border: none; color: rgb(153, 51, 0); font-weight: bold; background-color: inherit;">option</span><span style="margin: 0px; padding: 0px; border: none; background-color: inherit;"> </span><span class="attribute" style="margin: 0px; padding: 0px; border: none; color: red; background-color: inherit;">value</span><span style="margin: 0px; padding: 0px; border: none; background-color: inherit;">=</span><span class="attribute-value" style="margin: 0px; padding: 0px; border: none; color: blue; background-color: inherit;">"4"</span><span class="tag" style="margin: 0px; padding: 0px; border: none; color: rgb(153, 51, 0); font-weight: bold; background-color: inherit;">></span><span style="margin: 0px; padding: 0px; border: none; background-color: inherit;">test4</span><span class="tag" style="margin: 0px; padding: 0px; border: none; color: rgb(153, 51, 0); font-weight: bold; background-color: inherit;"></</span><span class="tag-name" style="margin: 0px; padding: 0px; border: none; color: rgb(153, 51, 0); font-weight: bold; background-color: inherit;">option</span><span class="tag" style="margin: 0px; padding: 0px; border: none; color: rgb(153, 51, 0); font-weight: bold; background-color: inherit;">></span><span style="margin: 0px; padding: 0px; border: none; background-color: inherit;">  </span></span></li><li style="border-style: none none none solid; border-left-width: 3px; border-left-color: rgb(108, 226, 108); list-style: decimal-leading-zero outside; line-height: 18px; margin: 0px !important; padding: 0px 3px 0px 10px !important; background-color: rgb(248, 248, 248);"><span style="margin: 0px; padding: 0px; border: none; color: black; background-color: inherit;"><span class="tag" style="margin: 0px; padding: 0px; border: none; color: rgb(153, 51, 0); font-weight: bold; background-color: inherit;"><</span><span class="tag-name" style="margin: 0px; padding: 0px; border: none; color: rgb(153, 51, 0); font-weight: bold; background-color: inherit;">option</span><span style="margin: 0px; padding: 0px; border: none; background-color: inherit;"> </span><span class="attribute" style="margin: 0px; padding: 0px; border: none; color: red; background-color: inherit;">value</span><span style="margin: 0px; padding: 0px; border: none; background-color: inherit;">=</span><span class="attribute-value" style="margin: 0px; padding: 0px; border: none; color: blue; background-color: inherit;">"5"</span><span class="tag" style="margin: 0px; padding: 0px; border: none; color: rgb(153, 51, 0); font-weight: bold; background-color: inherit;">></span><span style="margin: 0px; padding: 0px; border: none; background-color: inherit;">test5</span><span class="tag" style="margin: 0px; padding: 0px; border: none; color: rgb(153, 51, 0); font-weight: bold; background-color: inherit;"></</span><span class="tag-name" style="margin: 0px; padding: 0px; border: none; color: rgb(153, 51, 0); font-weight: bold; background-color: inherit;">option</span><span class="tag" style="margin: 0px; padding: 0px; border: none; color: rgb(153, 51, 0); font-weight: bold; background-color: inherit;">></span><span style="margin: 0px; padding: 0px; border: none; background-color: inherit;">  </span></span></li><li class="alt" style="border-style: none none none solid; border-left-width: 3px; border-left-color: rgb(108, 226, 108); list-style: decimal-leading-zero outside; color: inherit; line-height: 18px; margin: 0px !important; padding: 0px 3px 0px 10px !important;"><span style="margin: 0px; padding: 0px; border: none; color: black; background-color: inherit;"><span class="tag" style="margin: 0px; padding: 0px; border: none; color: rgb(153, 51, 0); font-weight: bold; background-color: inherit;"></</span><span class="tag-name" style="margin: 0px; padding: 0px; border: none; color: rgb(153, 51, 0); font-weight: bold; background-color: inherit;">select</span><span class="tag" style="margin: 0px; padding: 0px; border: none; color: rgb(153, 51, 0); font-weight: bold; background-color: inherit;">></span><span style="margin: 0px; padding: 0px; border: none; background-color: inherit;">  </span></span></li></ol><div><span style="line-height: 18px;"></span><pre id="best-content-1467156458" accuse="aContent" class="best-text mb-10" style="margin-top: 0px; margin-bottom: 10px; padding: 0px; font-family: arial, 'courier new', courier, 宋体, monospace; white-space: pre-wrap; word-wrap: break-word; color: rgb(51, 51, 51); font-size: 14px; line-height: 24px; background-color: rgb(241, 254, 221);"></select第二种：<span onmousemove=this.setCapture(); onmouseout=this.releaseCapture(); onfocus=this.blur();<select<option1 </option<option selected2 </option</select</span其<img class="word-replace" src="http://zhidao.baidu.com/api/getdecpic?picenc=c6af7a686f6e67e622" style="border: 0px; vertical-align: middle;" alt="" />onmousemove=this.setCapture(); onmouseout=this.releaseCapture(); 屏蔽了鼠标事件<img class="word-replace" src="http://zhidao.baidu.com/api/getdecpic?picenc=c6af636f6d6d61e622" style="border: 0px; vertical-align: middle;" alt="" />onfocus=this.blur();屏蔽了键盘事件<img class="word-replace" src="http://zhidao.baidu.com/api/getdecpic?picenc=c6af636f6d6d61e622" style="border: 0px; vertical-align: middle;" alt="" />onfocus=this.blur();表示该对象<img class="word-replace" src="http://zhidao.baidu.com/api/getdecpic?picenc=c6af6a69616e67e622" style="border: 0px; vertical-align: middle;" alt="" />获得焦点时<img class="word-replace" src="http://zhidao.baidu.com/api/getdecpic?picenc=c6af6a6975e622" style="border: 0px; vertical-align: middle;" alt="" />让<img class="word-replace" src="http://zhidao.baidu.com/api/getdecpic?picenc=c6af74615f6974e622" style="border: 0px; vertical-align: middle;" alt="" />失去焦点<img class="word-replace" src="http://zhidao.baidu.com/api/getdecpic?picenc=c6af636f6d6d61e622" style="border: 0px; vertical-align: middle;" alt="" />按键盘<img class="word-replace" src="http://zhidao.baidu.com/api/getdecpic?picenc=c6af6465e622" style="border: 0px; vertical-align: middle;" alt="" />TAB键时跳过<img class="word-replace" src="http://zhidao.baidu.com/api/getdecpic?picenc=c6af74615f6974e622" style="border: 0px; vertical-align: middle;" alt="" /><img class="word-replace" src="http://zhidao.baidu.com/api/getdecpic?picenc=c6af636f6d6d61e622" style="border: 0px; vertical-align: middle;" alt="" />使下<img class="word-replace" src="http://zhidao.baidu.com/api/getdecpic?picenc=c6af796931e622" style="border: 0px; vertical-align: middle;" alt="" /><img class="word-replace" src="http://zhidao.baidu.com/api/getdecpic?picenc=c6af6765e622" style="border: 0px; vertical-align: middle;" alt="" />控件获得焦点<img class="word-replace" src="http://zhidao.baidu.com/api/getdecpic?picenc=c6af73746f70e622" style="border: 0px; vertical-align: middle;" alt="" />