文本和下拉結合的可填可選輸入框

文本和下拉結合的可填可選輸入框

前段時間客戶要求輸入框既可以像文本框那樣輸入,又可以下拉選擇 。本以爲會非常的複雜,後來做起來卻發現並不難,只是有些巧妙的地方要注意。可填可選的輸入框是由一個input text控件和select控件經過剪切疊加組合而成.

html代碼:
<tr> 
 <td align="right"  width="33%">&nbsp;</td>
 <td align="center"  width="33%"><strong>工作日時限:</strong></td>
 <td align="left"  width="33%">
 <input type="text" name="dayLimit" style="width:45px;POSITION: absolute">
 <select  id="choose" onchange="document.all['dayLimit'].value=this.options[this.selectedIndex].value" style="width:62px;CLIP: rect(auto auto auto 45px); POSITION: absolute">
  <option value=""></option>
  <option value="5">5</option>
  <option value="10">10</option>
  <option value="15">15</option>
 </select>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;天</Td>
</tr>

關鍵:
1。由select的onchange替代input text的value值。
2。rect ( number number number number )元素:
   依據上-右-下-左的順序提供自對象左上角爲(0,0)座標計算的四個偏移數值,其中任一數值都可用 auto 替換,即此邊不剪切;必須將 position 屬性的值設爲 absolute ,此屬性方可使用。
3。要做這個控件,只需對rect(number number number number )最後一個number設置一個值,其餘都爲auto。
   向下的箭頭部分的長度大約17px,所以就有這樣一個規律:
   select控件的長度=input text控件的長度+17px
   也就是說,如果我希望在頁面上呈現一個217px的可填可寫的select控件,就可以設置如下:
   input text : 45px
   select控件    : 62px
   rect設置      :rect(auto auto auto 45px )

javascipt取值,實質是取input text的值:
var dayLimit = document.all["dayLimit"].value;
alert("dayLimit="+dayLimit);
原來就是這麼簡單的!

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章