模拟获得input的scrollLeft
来源:互联网 发布:零基础java 编辑:程序博客网 时间:2024/04/30 08:19
在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);};
文章作者:
- 模拟获得input的scrollLeft
- Jquery的模拟事件,input模拟focus
- scrollLeft的必要条件
- scrollTop scrollLeft的封装
- scrollLeft的具体用法
- 不能获得form中input的值
- js获得input的实时输入值
- scrollTop和scrollLeft的用法
- 关于scrollLeft的赋值问题
- input标签的获得焦点和失去焦点的样式
- IE8下input无法获得焦点的诡异问题
- JQuery不能获得input 中hidden类型的值
- js遍历input的name获得value实例
- input file标签 获得添加文件大小的方法
- js获得checkbox选中值及input后面的文本
- onfocus 获得焦点方法只获取一次input的值
- 【微信小程序】获得用户input内容的方法
- js获得表格里input的值,验证input值是否是数字
- jQuery操作Asp.net控件
- firebug使用详解
- Windows系统中的 Timer Queues 、SetTimer
- 主程序与DLL之间的全局变量问题
- 深度测试与alpha混合
- 模拟获得input的scrollLeft
- Myeclipse查找功能
- Android中音乐文件的信息详解
- 无限享受百度文库,财富值无视
- yum解决rpm依赖
- OAUTH 原理介绍
- android开发中遇到的2.2与2.3以上的区别
- 用XFire 实现webservice
- 锁屏状态下,看到歌手图片