网站制作学习网JS脚本→正文:点击上下左右键进行加减
字体:

点击上下左右键进行加减

JS脚本 2010/4/20 14:32:22  点击:不统计

www-fo-a-sp.cn

通过获取键盘上下左右按钮按键事件,让文本框里面的值自动加减.
直接上代码,在代码后面解释.

查看效果:点击上下左右键进行加减

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<script language="javascript">
<!--
var forasp = new Object;
forasp.formate = function(oEvent)//格式化event对象,在以前说过
{
var sUserAgent = navigator.userAgent;
var isIE = sUserAgent.indexOf("compatible")>-1 &&sUserAgent.indexOf("MSIE")>-1&&!sUserAgent.indexOf("Opera")>-1;
var isWin = (navigator.platform == "Win32") || (navigator.platform == "Windows");
if(isIE && isWin)
{oEvent.charCode = (oEvent.type == "keypress")?oEvent.keyCode:0;
oEvent.eventPhase = 2;
oEvent.isChar = (oEvent.charCode > 0);
oEvent.pageX = oEvent.clinetX +document.body.scrollLeft;
oEvent.pageY = oEvent.clinetY +document.body.scrollTop;
oEvent.preventDefault = function(){this.returnvalue = false;}
if(oEvent.type == "mouseout")
{//<网站http://www.制forasp作.cn>
oEvent.relatedTaget = oEvent.toElement;
}else if(oEvent.type == "mouseover")
{
oEvent.relatedTarget = oEvent.fromElement;
}
oEvent.stopPropagation = function(){this.cancelBubble = true;}
oEvent.target = oEvent.srcElement;
oEvent.time = (new Date().getTime());
}
return oEvent;
}//<网站http://www.制forasp作.cn>
forasp.key_action = function(obj,oEvent)//主要动作函数
{
var text_min = parseInt(obj.getAttribute("min"));//获取对象最小值
var text_max = parseInt(obj.getAttribute("max"));//获取对象最大值
var oEvent  = forasp.formate(oEvent);//格式化event
var now_value = parseInt(obj.value);//获取键盘code值
if (oEvent.keyCode == 37 ||oEvent.keyCode == 38)//如果是上或者左键自动加
 {
 obj.value = now_value+1 >text_max?text_max:now_value +1;
 }
if (oEvent.keyCode == 40 ||oEvent.keyCode == 39)//如果是下或者右键自动减
 {
   obj.value = now_value-1 <text_min?text_min:now_value -1;
 }
}
window.onload = function(){document.getElementById("forasp_cn").focus();//打开页面时自动获取焦点}
-->
</script>
</HEAD>
<BODY>
<input type="text" min="10" max="100" id="forasp_cn" value="15" onkeydown = "forasp.key_action(this,event)"; readonly>
</BODY>
</HTML>
代码完毕 看看吧.网站制作学习网htt://www.forasp.cn/转载请注明.


原文章%77w%77%2Ef%6F%72%61%73%70%2E%63n

·上一篇:javascript操作文本框2 >>    ·下一篇:javascript获取按键值 >>
推荐文章
最新文章