模拟获得input的scrollLeft

在webkit内核中。直接可以获得input框的滚动条宽度.用input.scrollLeft;在firefox和opera的等浏览器取得该值一直为0。所以采用一种模拟的方法来获得这个值。

首先是上边的input

<input id="i1" style="width:100px;" />

下边是一个模拟的外层div里边有一个span.样式宽度边框等和上边的input一致。

<div id="simu-wrap" style="width:100px;position:absolute;overflow-x:scroll;padding: 1px 0px;border: 2px inset;">

<span id="s1"></span>
</div>

当在input框中按左键或者鼠标往左移的时候就该input的scrollLeft就会减少. 这时需要判断s1的offsetWidth是不是比上次的oldScroll值要小.小的话说明往左滚动了。思路是把input框里边的内容放到s1的span里。然后获得外层div的scrollLeft. 由于该div的滚动条默认是最左边。需要给该div设置一个大的scrollLeft值. 例如 $(“simu-wrap”).scrollLeft =100; 再取就能取到该div的实际scrollLeft值。这样就能获得该input框不断向右的scrollLeft值。

这样就可以通过div+span模拟得到input的scrollLeft了。

var sl = 0,oldScroll= 0;
//模拟实现
function simu() { var str = this.value, l = this.selectionStart, //得到input光标开始位置 s = str.substring(0,l-1); //光标之前的字符串 //全选后滚动条不变化 if(this.selectionStart == 0 && this.selectionEnd == str.length) return; $("s1").innerHTML = s; //文字超出输入框的右边界 $("simu-wrap").scrollLeft = 1000; var simScrollLeft = $("simu-wrap").scrollLeft; if(simScrollLeft > sl ) { sl = simScrollLeft; } //移到左边隐藏的文字处 leftHideWidth = $("s1").offsetWidth; if(leftHideWidth <= oldScroll ) { sl = leftHideWidth; } console.log("滚动条值: " + sl); oldScroll = sl; } 下边是监听 $("i1").onclick = function(e) { simu.call(this); }; $("i1").onkeyup = function(e) { simu.call(this); }; 文章作者：