文本和下拉结合的可填可选输入框

本以为会非常的复杂,后来做起来却发现并不难,只是有些巧妙的地方要注意。可填可选的输入框是由一个input text控件和select控件经过剪切叠加组合而成.

 
 

关键:

  • 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);
原来就是这么简单的!

你可能感兴趣的:(文本和下拉结合的可填可选输入框)