`
qq125922714
  • 浏览: 36658 次
社区版块
存档分类
最新评论

[转]javascript:只能输入数字(ie、ff)

    博客分类:
  • java
阅读更多
    <div>本文转自:http://www.cnblogs.com/ly5201314/archive/2009/03/04/1402993.html<br><p>javascript:只能输入数字(ie、ff)</p><p>为了解决只能输入数字的问题,网上有许多资料,现归拢一下。</p><p><strong>  一、不带负号的输入</strong></p><p>这里,没有解决“正负号”的问题。</p><p>由于“正负号”必须出现在数字的最前端,因此,必须要判断当前光标所在的位置是否在输入文本框的首位。</p><table style="border-right: 1px solid; border-top: 1px solid; border-left: 1px solid; border-bottom: 1px solid; background-color: #e0e0e0;" cellspacing="0" cellpadding="0" width="100%" border="1"><tr><td><p>&lt;script language="javascript" type="text/javascript" &gt;<br>&lt;!--<br>//调用方式:onkeydown = "digitinput(this,event);"<br>function digitinput(el,ev) {<br>//8:退格键、46:delete、37-40: 方向键<br>//48-57:小键盘区的数字、96-105:主键盘区的数字<br>//110、190:小键盘区和主键盘区的小数<br>//189、109:小键盘区和主键盘区的负号</p><p> var event = ev || window.event; //ie、ff下获取事件对象<br> var currentkey = event.charcode||event.keycode; //ie、ff下获取键盘码<br><br> //小数点处理<br> if (currentkey == 110 || currentkey == 190) {<br> if (el.value.indexof(".")&gt;=0) <br> if (window.event) //ie<br> event.returnvalue=false; //e.returnvalue = false;效果相同.<br> else //firefox<br> event.preventdefault();</p><p> } else <br> if (currentkey!=8 &amp;&amp; currentkey != 46 &amp;&amp; (currentkey&lt;37 || currentkey&gt;40) &amp;&amp; (currentkey&lt;48 || currentkey&gt;57) &amp;&amp; (currentkey&lt;96 || currentkey&gt;105))<br> if (window.event) //ie<br> event.returnvalue=false; //e.returnvalue = false;效果相同.<br> else //firefox<br> event.preventdefault();</p><p>}<br>--&gt;</p><p>&lt;/script&gt;</p></td></tr></table><p><strong>  二、带负号的输入</strong></p><p>  判断带负号的输入,则必须要知道光标的位置,也就是说,只有当光标在最前端时,负号才有效。</p><table style="border-right: 1px solid; border-top: 1px solid; border-left: 1px solid; border-bottom: 1px solid; background-color: #e0e0e0;" cellspacing="0" cellpadding="0" width="100%" border="1"><tr><td><p>&lt;script language="javascript" type="text/javascript" &gt;<br>&lt;!--<br>//调用方式:onkeydown = "digitinput(this,event);"<br>function digitinput(el,ev) {<br>//8:退格键、46:delete、37-40: 方向键<br>//48-57:小键盘区的数字、96-105:主键盘区的数字<br>//110、190:小键盘区和主键盘区的小数<br>//189、109:小键盘区和主键盘区的负号</p><p> var event = ev || window.event; //ie、ff下获取事件对象<br> var currentkey = event.charcode||event.keycode; //ie、ff下获取键盘码<br><br> //小数点处理<br> if (currentkey == 110 || currentkey == 190) {<br> if (el.value.indexof(".")&gt;=0) <br> if (window.event) //ie<br> event.returnvalue=false; //e.returnvalue = false;效果相同.<br> else //firefox<br> event.preventdefault();</p><p> } else<br> //负号处理<br><strong> if (currentkey == 189 || currentkey == 109) {<br> if (getposition(el)&gt;0 || el.value.indexof("-")&gt;=0)<br></strong> if (window.event) //ie<br> event.returnvalue=false; //e.returnvalue = false;效果相同.<br> else //firefox<br> event.preventdefault();<br> } else<br> if (currentkey!=8 &amp;&amp; currentkey != 46 &amp;&amp; (currentkey&lt;37 || currentkey&gt;40) &amp;&amp; (currentkey&lt;48 || currentkey&gt;57) &amp;&amp; (currentkey&lt;96 || currentkey&gt;105))<br> if (window.event) //ie<br> event.returnvalue=false; //e.returnvalue = false;效果相同.<br> else //firefox<br> event.preventdefault();</p><p>}<br>/**<br> * 获取光标所在的字符位置<br> * @param obj 要处理的控件, 支持文本域和输入框<br> * @author hotleave<br> */<br>function getposition(obj){<br> var result = 0;<br> if(obj.selectionstart){ //非ie浏览器<br> result = obj.selectionstart<br> }else{ //ie<br> var rng;<br> if(obj.tagname == "textarea"){ //如果是文本域<br> rng = event.srcelement.createtextrange();<br> rng.movetopoint(event.x,event.y);<br> }else{ //输入框<br> rng = document.selection.createrange();<br> }<br> rng.movestart("character",-event.srcelement.value.length);<br> result = rng.text.length;<br> }<br> return result;<br>}</p><p>--&gt;</p><p>&lt;/script&gt;</p></td></tr></table><p>getposition(obj)函数,是一个获取光标位置的通用函数。</p><p>为了减少传入的参数,事件对象是可以通过事件获取的:</p><table style="border-right: 1px solid; border-top: 1px solid; border-left: 1px solid; border-bottom: 1px solid; background-color: #ccffff;" cellspacing="0" cellpadding="0" width="100%" border="1"><tr><td>var el = window.event.srcelement||ev.target;</td></tr></table><p>只需将传digitinput(el,ev)的第一句加上上面这条语句,并且将传入参数只有ev一个即可,这样,减少了传入值。</p><p><strong>  三、扩展</strong></p><p>  我们可以增加一个传入的参数值,用于限定允许输入的数字条件:</p><p>1:允许正整数;2、允许正小数;3、允许负整数;4、允许负小数。</p><p>当然,传入一个正则表达式也可以实现。</p><div style="border-right: #cccccc 1px solid; padding-right: 5px; border-top: #cccccc 1px solid; padding-left: 4px; font-size: 13px; padding-bottom: 4px; border-left: #cccccc 1px solid; width: 98%; padding-top: 4px; border-bottom: #cccccc 1px solid; background-color: #eeeeee;"><img alt="" src="http://www.cnblogs.com/images/outliningindicators/none.gif" align="top"><span style="color: #000000;">functiononlynum()<br><img id="codehighlighter1_20_477_open_image" src="http://www.cnblogs.com/images/outliningindicators/expandedblockstart.gif" align="top"><img id="codehighlighter1_20_477_closed_image" style="display: none;" src="http://www.cnblogs.com/images/outliningindicators/contractedblock.gif" align="top"></span><span id="codehighlighter1_20_477_open_text"><span style="color: #000000;">{<br><img alt="" src="http://www.cnblogs.com/images/outliningindicators/inblock.gif" align="top"></span><span style="color: #0000ff;">if</span><span style="color: #000000;">(</span><span style="color: #000000;">!</span><span style="color: #000000;">((</span><span style="color: #0000ff;">event</span><span style="color: #000000;">.keycode</span><span style="color: #000000;">&gt;=</span><span style="color: #000000;">48</span><span style="color: #000000;">&amp;&amp;</span><span style="color: #0000ff;">event</span><span style="color: #000000;">.keycode</span><span style="color: #000000;">&lt;=</span><span style="color: #000000;">57</span><span style="color: #000000;">)<br><img alt="" src="http://www.cnblogs.com/images/outliningindicators/inblock.gif" align="top"></span><span style="color: #000000;">||</span><span style="color: #000000;">(</span><span style="color: #0000ff;">event</span><span style="color: #000000;">.keycode</span><span style="color: #000000;">&gt;=</span><span style="color: #000000;">96</span><span style="color: #000000;">&amp;&amp;</span><span style="color: #0000ff;">event</span><span style="color: #000000;">.keycode</span><span style="color: #000000;">&lt;=</span><span style="color: #000000;">105</span><span style="color: #000000;">)<br><img alt="" src="http://www.cnblogs.com/images/outliningindicators/inblock.gif" align="top"></span><span style="color: #000000;">||</span><span style="color: #000000;">(</span><span style="color: #0000ff;">event</span><span style="color: #000000;">.keycode</span><span style="color: #000000;">==</span><span style="color: #000000;">8</span><span style="color: #000000;">)</span><span style="color: #008000;">//</span><span style="color: #008000;">退格</span><span style="color: #008000;"><br><img alt="" src="http://www.cnblogs.com/images/outliningindicators/inblock.gif" align="top"></span><span style="color: #000000;"></span><span style="color: #000000;">||</span><span style="color: #000000;">(</span><span style="color: #0000ff;">event</span><span style="color: #000000;">.keycode</span><span style="color: #000000;">==</span><span style="color: #000000;">46</span><span style="color: #000000;">)</span><span style="color: #008000;">//</span><span style="color: #008000;">del</span><span style="color: #008000;"><br><img alt="" src="http://www.cnblogs.com/images/outliningindicators/inblock.gif" align="top"></span><span style="color: #000000;"></span><span style="color: #000000;">||</span><span style="color: #000000;">(</span><span style="color: #0000ff;">event</span><span style="color: #000000;">.keycode</span><span style="color: #000000;">==</span><span style="color: #000000;">27</span><span style="color: #000000;">)</span><span style="color: #008000;">//</span><span style="color: #008000;">esc</span><span style="color: #008000;"><br><img alt="" src="http://www.cnblogs.com/images/outliningindicators/inblock.gif" align="top"></span><span style="color: #000000;"></span><span style="color: #000000;">||</span><span style="color: #000000;">(</span><span style="color: #0000ff;">event</span><span style="color: #000000;">.keycode</span><span style="color: #000000;">==</span><span style="color: #000000;">37</span><span style="color: #000000;">)</span><span style="color: #008000;">//</span><span style="color: #008000;">左</span><span style="color: #008000;"><br><img alt="" src="http://www.cnblogs.com/images/outliningindicators/inblock.gif" align="top"></span><span style="color: #000000;"></span><span style="color: #000000;">||</span><span style="color: #000000;">(</span><span style="color: #0000ff;">event</span><span style="color: #000000;">.keycode</span><span style="color: #000000;">==</span><span style="color: #000000;">39</span><span style="color: #000000;">)</span><span style="color: #008000;">//</span><span style="color: #008000;">右</span><span style="color: #008000;"><br><img alt="" src="http://www.cnblogs.com/images/outliningindicators/inblock.gif" align="top"></span><span style="color: #000000;"></span><span style="color: #000000;">||</span><span style="color: #000000;">(</span><span style="color: #0000ff;">event</span><span style="color: #000000;">.keycode</span><span style="color: #000000;">==</span><span style="color: #000000;">16</span><span style="color: #000000;">)</span><span style="color: #008000;">//</span><span style="color: #008000;">shift</span><span style="color: #008000;"><br><img alt="" src="http://www.cnblogs.com/images/outliningindicators/inblock.gif" align="top"></span><span style="color: #000000;"></span><span style="color: #000000;">||</span><span style="color: #000000;">(</span><span style="color: #0000ff;">event</span><span style="color: #000000;">.keycode</span><span style="color: #000000;">==</span><span style="color: #000000;">9</span><span style="color: #000000;">)</span><span style="color: #008000;">//</span><span style="color: #008000;">tab</span><span style="color: #008000;"><br><img alt="" src="http://www.cnblogs.com/images/outliningindicators/inblock.gif" align="top"></span><span style="color: #000000;">)<br><img alt="" src="http://www.cnblogs.com/images/outliningindicators/inblock.gif" align="top">)<br><img alt="" src="http://www.cnblogs.com/images/outliningindicators/inblock.gif" align="top"></span><span style="color: #008000;">//</span><span style="color: #008000;">考虑小键盘上的数字键</span><span style="color: #008000;"><br><img alt="" src="http://www.cnblogs.com/images/outliningindicators/inblock.gif" align="top"></span><span style="color: #000000;"></span><span style="color: #0000ff;">event</span><span style="color: #000000;">.returnvalue</span><span style="color: #000000;">=</span><span style="color: #0000ff;">false</span><span style="color: #000000;">;<br><img alt="" src="http://www.cnblogs.com/images/outliningindicators/expandedblockend.gif" align="top">}</span></span><span style="color: #000000;"> <br></span>
分享到:
评论

相关推荐

    javascript常用操作技巧

    - **应用场景**:适合需要精确控制输入的情况,比如数字输入框。 #### 6. 网页无法被另存为 - **代码示例**: ```javascript if (window == top) { top.location.href = "frames.htm"; } ``` - **解释**:...

    检测邮箱地址是否合法 Check Mail Address (For: IE5+、FF1.06、Opera 7+ …)[

    本文将详细介绍如何使用JavaScript来检查邮箱地址的有效性,适用于IE5+、Firefox 1.06及Opera 7+等主流浏览器。 首先,我们需要理解一个有效的邮箱地址应该遵循的格式。根据RFC 5322,一个标准的电子邮件地址由两...

    Javascript中最常用的55个经典技巧

    - **应用场景**:当希望用户只能输入英文字符时使用。 ### 8. 检测是否在框架内打开页面 - **技巧描述**:通过比较`window`对象与`top`对象,判断当前页面是否在一个框架内打开。 - **代码示例**: ```html ...

    javascript html5 验证码

    项目描述中提到,这个验证码系统已在IE、FF、Chrome、Opera和Safari等多个浏览器上测试通过,这意味着代码具有良好的浏览器兼容性。为了实现这一点,可能需要使用像jQuery这样的库来处理跨浏览器差异,或者使用特性...

    JavaScript 55个经典例子

    根据提供的文件信息,我们可以总结出以下JavaScript相关的知识点: ### 1. 禁止右键菜单 ```javascript oncontextmenu="window.event.returnValue=false" ``` 或者 ```html ...

    JavaScript常用脚本汇总(一)

    jquery限制文本框只能输入数字,兼容IE、chrome、FF(表现效果不一样),示例代码如下: 代码如下: $(“input”).keyup(function(){ //keyup事件处理  $(this).val($(this).val().replace(/\D|^0/g,”)); }).bind(...

    jQuery插件教程(搜罗了全部插件).docx

    jQuery的轻量级特性(压缩后仅21k)以及对CSS3和多浏览器的良好支持(包括IE 6.0+,FF 1.5+,Safari 2.0+,Opera 9.0+)使其成为开发者的首选工具。 jQuery插件是jQuery生态系统的重要组成部分,它们扩展了jQuery的...

    好看的文本框和按钮样式

    `maxlength="3"`确保每个输入框最多只能输入三位数字,`size="5"`设定了输入框的宽度,使其看起来更整洁。结合`onkeyup`事件,当输入达到三个字符时,代码会自动选中(或聚焦)下一个输入框,便于用户连续输入多个...

    js导出table到excel同时兼容FF和IE示例

    本文介绍了一个JavaScript的方法,它能够实现将网页中的表格数据导出为Excel文件的功能,并确保该方法可以在微软的IE浏览器和Mozilla的火狐(Firefox)浏览器中同时使用。 ### 1. 导出原理与兼容性问题 传统上,将...

    兼容FF和IE的动态table示例自写

    /&gt;` 是一个可以输入数字的文本框,用于输入零件数量。这些事件处理函数(如`onkeypress`和`onkeyup`)是JavaScript的一部分,用于处理用户输入时的逻辑。 现在转向JavaScript部分,`addEvent`函数是用来实现事件...

    javascript常用函数(1)

    1、 调整图片大小,不走形(FF IE 兼容)/ 剪切图片(overflow:hidden) 2、 控制textarea区域文字数量 3、 点击显示新窗口 4、 input框自动随内容自动变长 5、 添加收藏夹 6、 设置首页 7、 Jquery + Ajax ...

    js 操作table之 移动TR位置 兼容FF 跟 IE

    - 输入验证部分提示用户输入有效的数字,并在输入非法值时给出警告,这是前端数据验证的一个实例。 5. JavaScript中的一些不规范用法: - 代码段中存在一些不规范或已弃用的JavaScript用法,例如使用`var`关键字...

    JS代码收藏大全

    - **应用场景**:适用于需要确保页面只能在特定框架中打开的情况,如企业内部管理系统等。 #### 八、防止页面被其他网站嵌入为框架内容 - **代码实现**: ```javascript if (top.location != self.location) { ...

    excCommand命令

    `execCommand` 是一个在早期浏览器中广泛使用的非标准 JavaScript 方法,主要用于实现富文本编辑器的功能。通过调用 `document.execCommand`,开发者能够轻松地执行一系列与编辑文档相关的操作,如格式化文本、插入...

    js使用小技巧

    Javascript小技巧一箩筐 事件源对象 event.srcElement.tagName event.srcElement.type 捕获释放 event.srcElement.setCapture(); event.srcElement.releaseCapture(); 事件按键 event.keyCode ...

    如何规范css的命名和书写

    - 可以更好地与JavaScript变量命名区分开来(JavaScript变量命名通常使用下划线)。 2. **避免滥用ID**:虽然ID具有更高的特异性,但在实际项目中应尽量减少使用,因为ID只能在一个文档中出现一次。相比之下,类...

    js实用手册以及经典43个功能

    此属性可以禁用输入法在输入框中的功能,适用于需要控制输入格式的场景,如数字输入等。 ### 8. 跳转至框架页 ```html &lt;script language="JavaScript"&gt; if(window==top) top.location.href="frames.htm"; ``` 这...

    网页制作精华代码大全

    这对于需要用户输入英文或数字的场景很有用。 #### 5. 框架保护 **代码示例**: ```html &lt;script language="javascript"&gt; if (window == top) { top.location.href = "frames.htm"; } ``` **知识点解析**:该...

Global site tag (gtag.js) - Google Analytics