CutePsWheel javascript libary 控制输入文本框为可使用滚轮控制的js库


Posted in Javascript onFebruary 07, 2010

简介

实现类似于Photoshop控制面板输入文本数字的效果,所以名称叫做PsWheel。用于控制输入数字类型文本框实现鼠标滚轮上下滑动改变值,支持正整数、小数类型输入文本。
兼容IE/Firefox/Opera/Safari/Chrom
可定义滚动变化间隔值,支持整数、浮点数
双击恢复初始值
仅3.92K,压缩后2.67K
代码

/* 
* cutePsWheel JS 
* Description:A js liabary which control the text type of input box can plus or minus value like Photoshop 
* Author:walkingp 
* Site:http://www.51obj.cn/ 
* E-mail:walkingp@126.com 
* Last Modified:2010-2-5 
*/ 
//Initial the wheel scroll event 
var _orientValue=[];//orient value 
var _interval=[]; 
var _length=[]; 
function InitScrollFunc(){ 
var eles=GetObj(); 
for(var i=0;i<eles.length;i++){ 
if(document.addEventListener){ 
(function(i){eles[i].addEventListener('DOMMouseScroll',function(e){e.preventDefault();e.stopPropagation();var direct=e.detail<0?1:-1;ScrollText(eles[i],direct);},false);})(i); 
eles[i].addEventListener('dblclick',RestoreOrientValue,false); 
eles[i].addEventListener('blur',RemoveScrollFunc,false); 
//eles[i].addEventListener('mouseover',SetFocus,false); 
}//W3C/Mozila 
(function(i){eles[i].onmousewheel=function(){ScrollFunc(event,eles[i]);}})(i);//IE/Opera/Chrome/Safari 
(function(i){eles[i].ondblclick=function(){RestoreOrientValue(eles[i]);;}})(i); 
(function(i){eles[i].onblur=function(){RemoveScrollFunc(eles[i]);;}})(i);//Remove the wheel scroll event 
(function(i){eles[i].onmouseover=function(){SetFocus(eles[i]);}})(i); 
/*Initial the value array*/ 
if(eles[i].value!=""){ 
_orientValue.push(eles[i].value); 
}else{ 
_orientValue.push(0); 
} 
if(eles[i].getAttribute("interval")){ 
_interval.push(parseFloat(eles[i].getAttribute("interval"))); 
if(eles[i].getAttribute("interval").toString().indexOf(".")>0){ 
var __length=parseInt(eles[i].getAttribute("interval").toString().length) - parseInt(eles[i].getAttribute("interval").toString().indexOf("."))-1; 
_length.push(__length);//get the length follow the decimal point 
}else{ 
_length.push(0); 
} 
}else{ 
_interval.push(1); 
_length.push(0); 
} 
} 
} 
/*set object focus*/ 
function SetFocus(obj){ 
obj.focus(); 
obj.select(); 
} 
/*remove the wheel scroll event*/ 
function RemoveScrollFunc(obj){ 
if(document.removeEventListener){ 
obj.removeEventListener('DOMMouseScroll',ScrollFunc,false); 
obj.removeEventListener('dblclick',RestoreOrientValue,false); 
}else if(document.detachEvent){ 
obj.detachEvent('onmousewheel',ScrollFunc); 
obj.detachEvent('ondblclick',RestoreOrientValue); 
} 
} 
/*Restore the text box's orient value when double click event trigger*/ 
function RestoreOrientValue(obj){ 
var eles=GetObj(); 
for(var i=0;i<eles.length;i++){ 
if(obj==eles[i]){ 
obj.value=_orientValue[i]; 
obj.select(); 
} 
} 
} 
//core function 
function ScrollFunc(){//for HTML DOM 
var direct=0; 
var e=arguments[0]||window.event; 
if(window.event){ 
window.event.returnValue=false; 
window.event.cancelBubble=true;//Stop event bubble 
} 
if(e.wheelDelta){ 
direct=e.wheelDelta>0?1:-1; 
} 
ScrollText(arguments[1],direct); 
} 
//reference by ScrollFunc 
function ScrollText(obj,direct){ 
obj.focus(); 
var _value=0; 
if(obj.value!=""){ 
_value=parseFloat(obj.value); 
} 
var eles=GetObj(); 
for(var i=0;i<eles.length;i++){ 
if(obj==eles[i]){ 
if(direct>0){ 
_value+=_interval[i]; 
}else{ 
_value-=_interval[i]; 
} 
obj.value=_value.toFixed(_length[i]);//calulcate the rounding result 
obj.select();//set select status 
} 
} 
} 
//referenced function,only get the object which has the 'rel' attribute 
function GetObj(){ 
var objs=document.getElementsByTagName('input'); 
var elements=[]; 
for(var i=0;i<objs.length;i++){ 
if(objs[i].type=='text' && objs[i].getAttribute('rel') == 'wheel'){ 
elements.push(objs[i]); 
} 
} 
return elements; 
} 
//Add the WheelScroll function 
(function AddLoadEvent(func){ 
var _oldonload=window.onload; 
if(typeof window.onload!='function'){ 
window.onload=func; 
}else{ 
window.onload=function(){ 
_oldonload(); 
func(); 
} 
} 
})(InitScrollFunc);

效果图
CutePsWheel javascript libary 控制输入文本框为可使用滚轮控制的js库
资源
点击预览 http://demo.3water.com/js/cutePSWheel/demo.html
下载代码
Javascript 相关文章推荐
响应鼠标变换表格背景或者颜色的代码
Mar 30 Javascript
jQuery之排序组件的深入解析
Jun 19 Javascript
jquery使用jquery.zclip插件复制对象的实例教程
Dec 04 Javascript
javascript中数组的sort()方法的使用介绍
Dec 18 Javascript
JS中的phototype详解
Feb 04 Javascript
VSCode配置react开发环境的步骤
Dec 27 Javascript
详解node.js 下载图片的 2 种方式
Mar 02 Javascript
在 Linux/Unix 中不重启 Vim 而重新加载 .vimrc 文件的流程
Mar 21 Javascript
ES6小技巧之代替lodash
Jun 07 Javascript
JS实现点击下拉列表文本框中出现对应的网址,点击跳转按钮实现跳转
Nov 25 Javascript
原生JS实现无缝轮播图片
Jun 24 Javascript
浅谈vue中使用编辑器vue-quill-editor踩过的坑
Aug 03 Javascript
JavaScript 精粹读书笔记(1,2)
Feb 07 #Javascript
一些mootools的学习资源
Feb 07 #Javascript
Js 中debug方式
Feb 07 #Javascript
为调试JavaScript添加输出窗口的代码
Feb 07 #Javascript
JavaScript 读取元素的CSS信息的代码
Feb 07 #Javascript
js png图片(有含有透明)在IE6中为什么不透明了
Feb 07 #Javascript
JavaScript Event学习第八章 事件的顺序
Feb 07 #Javascript
You might like
PHP函数strip_tags的一个bug浅析
2014/05/22 PHP
php中出现空白页的原因及解决方法汇总
2014/07/08 PHP
php判断一个数组是否为有序的方法
2015/03/27 PHP
mysql_escape_string()函数用法分析
2016/04/25 PHP
Laravel框架控制器的request与response用法示例
2019/09/30 PHP
Jquery Change与bind事件代码
2011/09/29 Javascript
ASP.NET jQuery 实例6 (实现CheckBoxList成员全选或全取消)
2012/01/13 Javascript
JavaScript中的onerror事件概述及使用
2013/04/01 Javascript
浅析document.createDocumentFragment()与js效率
2013/07/08 Javascript
基于javascript 闭包基础分享
2013/07/10 Javascript
扩展IE中一些不兼容的方法如contains、startWith等等
2014/01/09 Javascript
Javascript之String对象详解
2016/06/08 Javascript
Spring MVC中Ajax实现二级联动的简单实例
2016/07/06 Javascript
vue.js 表格分页ajax 异步加载数据
2016/10/18 Javascript
原生js实现网页顶部自动下拉/收缩广告效果
2017/01/20 Javascript
基于jQuery实现弹幕APP
2017/02/10 Javascript
ES6中Symbol、Set和Map用法详解
2019/08/20 Javascript
Bootstrap实现模态框效果
2019/09/30 Javascript
JS实现滑动导航效果
2020/01/14 Javascript
JavaScript this使用方法图解
2020/02/04 Javascript
原生js实现照片墙效果
2020/10/13 Javascript
Nodejs 数组的队列以及forEach的应用详解
2021/02/25 NodeJs
Python中使用 Selenium 实现网页截图实例
2014/07/18 Python
Python微信企业号开发之回调模式接收微信端客户端发送消息及被动返回消息示例
2017/08/21 Python
Python+OpenCV实现实时眼动追踪的示例代码
2019/11/11 Python
Python Tensor FLow简单使用方法实例详解
2020/01/14 Python
Python Process创建进程的2种方法详解
2021/01/25 Python
瑞贝卡·明可弗包包官网:Rebecca Minkoff
2016/07/21 全球购物
Kickers鞋英国官网:男士、女士和儿童鞋
2021/03/08 全球购物
什么是"引用"?申明和使用"引用"要注意哪些问题?
2016/03/03 面试题
运动会入场词200字
2014/02/15 职场文书
《孙权劝学》教学反思
2014/04/23 职场文书
商场租赁意向书
2014/07/30 职场文书
交通事故赔偿起诉书
2015/05/20 职场文书
宪法宣传标语100条
2019/10/15 职场文书
python使用pycharm安装pyqt5以及相关配置
2022/04/22 Python