jquery鼠标滚轮控制文本框数字改变

最新推荐文章于 2024-04-10 17:53:38 发布

aizhen8632

最新推荐文章于 2024-04-10 17:53:38 发布

阅读量480

点赞数

CC 4.0 BY-SA版权

文章标签： javascript xhtml ViewUI

原文链接：http://www.cnblogs.com/s7mmersupport/archive/2010/06/26/1765717.html

本文介绍了一种使用jQuery实现的鼠标滚轮控制文本框内数字增减的方法。当鼠标移至文本框上并滚动滚轮时，文本框内的数值会相应地增加或减少。适用于网页开发中需要快速调整数值的场景。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

查看效果

下载地址

jquery 鼠标滚轮控制文本框数字改变

jquery 鼠标滚轮控制文本框数字改变，不知道如何描述给大家，也就是在网页的文本框中，只要鼠标移上后，文本框的文字就处于选中状态，如果这时候滚动鼠标滚轮，则选中状态的文字是可以改变的，向上增大，向下减小等，如果没听懂的朋友自己下载运行一下就知道了。

前台部分代码

代码

<! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >
< html xmlns ="http://www.w3.org/1999/xhtml" >
< head >
< title > ߼ / title >
< meta http-equiv ="Content-Type" content ="text/html; charset=utf-8" />
< script type ="text/javascript" src ="jquery.min.js" ></ script >
< script type ="text/javascript" src ="jquery.mousewheel.js" ></ script >
</ head >
< body >
< input type ="text" id ="txt1" value ="0" class ="txt" />
< input type ="text" id ="txt2" value ="10" class ="txt" />
< input type ="text" id ="txt3" value ="-10" class ="txt" />
< input type ="text" id ="txt4" value ="10.4" class ="txt" />
< script >
$( function (){
    $( " .txt " ).mousewheel( function (objEvent, intDelta){
        ScrollText( this ,intDelta); // intDeltaʱintDelta0
    });
})

function ScrollText(oTxt,arg){
    oTxt.focus();
     var _value = parseInt(oTxt.value);
     if (arg > 0 ){
    _value ++ ;
    } else {
    _value -- ;
    }
    oTxt.value = _value;
    oTxt.select(); // ѡ
}
</ script >
</ body >

</ html >

转载于:https://www.cnblogs.com/s7mmersupport/archive/2010/06/26/1765717.html