模拟获得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);
};

文章作者：