input自适应宽度

基本实现思路：
  将input的宽度设置为100%，这样就可以填充整个div的区域，然后在input的后面添加一个span元素，span的visibility属性设置为hidden不可见但占据文档流的位置，这时发现input排布在span的上面，于是把input的position属性设置为absolute决定定位，这样就可以将input覆盖在span的上面。在这里需要注意的时当input设置为absolute时，他的定位根据第一已定位的祖先元素，所以应把他的第一个父元素div设置成relative相对定位。然后你会发现input的宽度还是充满了整个文档，因为父元素为div他默认是填满他的父元素，但是如果把父元素设置成display:inline发现还是没效果，因为行内元素是不能设置宽度高度的，所以input的宽度就取了div的父元素body的宽度。这时就必须用到display:inline-block;这个css了。不要以为大功告成了，突然间你就会发现IE6 7不完全支持这个属性,可恨的浏览器。幸亏有了大牛们的hack

{
display:inline-block;
*display:inline;
*zoom:1;
} 

这样就能在IE6 7中很好的实现了
最后html+css结果：

.container {
	position:relative;
	display:inline-block;
	*display:inline;
	*zoom:1;
}
.selfAdapta {
	width:100%;
	position:absolute;
}
input,span{
	font-family:verdana,Arial,Helvetica,sans-serif;
	font-size: 12px;
}

<div id="container" class="container">
        <input type="text" class="selfAdapta"/>
        <span style="visibility:hidden"></span>
</div>

接下来就是js的事儿了，简单的想法就是时刻监听着input的输入将input的输入值拷贝到span中，这样就可以让span撑大div元素，通过input的width:100%属性，input也就回随之变大

$(function(){
	function valueChange(tid,sid){
            var jsUserName = "";
				
            if($.browser.msie) {// IE浏览器
                $("#" + tid).get(0).onpropertychange = setJsUserName;
            }else{  // 其他浏览器
                setJsUserName();
       	        $("#"+tid).get(0).addEventListener("input",setJsUserName,false);
            }
            // 设置span的值
            function setJsUserName(){
                $("#"+sid).text($("#"+tid).val());
            }
	}
			
	valueChange("input","span");
});

（在IE6下还存在问题 ，有待改进）
在IE6下虽然用hack方法解决了inline-block问题但是，其元素还是必须设置宽度，才对里面的input实现Width:100%产生效果，但这样做就失去了宽度自适应的效果了，嗨...，没办法~。因为自己项目的原因只能通过将input的z-index属性设置为-1，让后面的元素显示在input的上方，在感觉上有了自适应的效果，看图：

因为span的原因，后面元素就被往后挤了