基本实现思路:
将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
这样就能在IE6 7中很好的实现了
最后html+css结果:
接下来就是js的事儿了,简单的想法就是时刻监听着input的输入将input的输入值拷贝到span中,这样就可以让span撑大div元素,通过input的width:100%属性,input也就回随之变大
[color=red](在IE6下还存在问题 ,有待改进)[/color]
在IE6下虽然用hack方法解决了inline-block问题但是,其元素还是必须设置宽度,才对里面的input实现Width:100%产生效果,但这样做就失去了宽度自适应的效果了,嗨...,没办法~。因为自己项目的原因只能通过将input的z-index属性设置为-1,让后面的元素显示在input的上方,在感觉上有了自适应的效果,看图:
[img]http://dl.iteye.com/upload/attachment/525933/1ed6c417-8559-3c5e-9b0e-37d6a8b13d38.jpg[/img]
因为span的原因,后面元素就被往后挤了
将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");
});
[color=red](在IE6下还存在问题 ,有待改进)[/color]
在IE6下虽然用hack方法解决了inline-block问题但是,其元素还是必须设置宽度,才对里面的input实现Width:100%产生效果,但这样做就失去了宽度自适应的效果了,嗨...,没办法~。因为自己项目的原因只能通过将input的z-index属性设置为-1,让后面的元素显示在input的上方,在感觉上有了自适应的效果,看图:
[img]http://dl.iteye.com/upload/attachment/525933/1ed6c417-8559-3c5e-9b0e-37d6a8b13d38.jpg[/img]
因为span的原因,后面元素就被往后挤了