如何使用JS实现IE8浏览器input输入数字
如何使用JS实现IE8浏览器input输入数字
今天就跟大家聊聊有关如何使用JS实现IE8浏览器input输入数字，可能很多人都不太了解，为了让大家更加了解，小编给大家总结了以下内容，希望大家根据这篇文章可以有所收获。
今天处理一个表单的限制问题，然后测试说input输入框能输入数字以外的字符。当时我就表示在精神上强烈的谴责IE浏览器的各个版本。
在我测试后发现谷歌及其他浏览器都挺好的，就是IE浏览器不行，然后想着直接使用JS比较好，也不容易出现不兼容问题。
这里的代码是做了很多的改变，因为自己的项目上用的是跟其他的插件一起使用的，所以不需要现在这样麻烦。
使用方法很简单，下面是一些参数
1、data-cgldigits：小数位，0开始【默认值为0】
2、data-cglpone：是否支持负数 yes为支持，no为不支持【默认值为no】
3、data-cglzero：当input的值0的时候是否显示0，yes显示，no为不显示【默认值为yes】
下面是html的使用
<input type=”text” class=”cgl_inputnumber” data-cgldigits=”2″ data-cglpone=”yes” data-cglzero=”no”/>
点击demo查看效果
一、html部分
<ul class="ul">
<li><input type="text" class="cgl_inputnumber" data-cgldigits="0" data-cglpone="yes" data-cglzero="no"/></li>
<li><input type="text" class="cgl_inputnumber" data-cgldigits="1" data-cglpone="no"/></li>
<li><input type="text" class="cgl_inputnumber" data-cgldigits="2" data-cglpone="yes"/></li>
<li><input type="text" class="cgl_inputnumber" data-cgldigits="3" data-cglpone="no"/></li>
</ul>
二、css部分
<pre
<style>
.ul{ width:500px; margin:0 auto;}
.ul li{ padding:10px;}
.ul li input{ display:block; width:478px; height:30px; line-height:30px; font-size:14px; padding:0 10px; border:1px solid #666;}
</style>
三、js部分
<script type="text/javascript">
$(window).ready(function(){（www.gendan.com）
(function(){
$('.cgl_inputnumber').on('change',function(){
// 定义空的容器
var cgl_inputNumberVal = '';
var cgl_inputNumberPoint = 0;
var cgl_inputNumberNegative = '';
//当input的值0的时候是否显示0，默认显示varcgl_inputNumberZero=$(this).data('cglzero')||'yes';//定义小数点后几位数，这里直接截取，不是四舍五入varcgl_inputNumberDigits=$(this).data('cgldigits')||0;//是否支持负数yes：支持fasle：不支持varcgl_inputNumberPoNe=$(this).data('cglpone')||'no';/*console.log('小数点：'+cgl_inputNumberDigits+'\n'+'正负数：'+cgl_inputNumberPoNe+'\n'+'0显示：'+cgl_inputNumberZero)*///找到input的值varcgl_inputNumberValReal=$(this).val();//对input里面的数字进行循环查询for(vari=0;i<cgl_inputNumberValReal.length;i++){//求每个字的charCodeAt值varcgl_inputNumberValRealCode=cgl_inputNumberValReal.charCodeAt(i);if(cgl_inputNumberValReal.charCodeAt(0)==45&&cgl_inputNumberPoNe=='yes'){cgl_inputNumberNegative='-'}else{cgl_inputNumberNegative=''}//对每个字进行判断，0-9+.if(47<cgl_inputNumberValRealCode&&cgl_inputNumberValRealCode<58){cgl_inputNumberVal+=cgl_inputNumberValReal[i]}elseif(cgl_inputNumberValRealCode==46){//开始对.进行判断只留一个，这里留下第一个cgl_inputNumberPoint++;if(cgl_inputNumberPoint==1){cgl_inputNumberVal+=cgl_inputNumberValReal[i]}else{//第二次的.不执行};}else{//只可输入数字，略过其他字符};};//计算小数位数cgl_inputNumberVal=Math.floor(cgl_inputNumberVal*(Math.pow(10,cgl_inputNumberDigits)))/((Math.pow(10,cgl_inputNumberDigits)));//给input赋值if(cgl_inputNumberVal==0){//控制显示0的时候if(cgl_inputNumberZero=='yes'){$(this).val('0');}else{$(this).val('');}}else{$(this).val(cgl_inputNumberNegative+cgl_inputNumberVal);}});}())
});
</script>
看完上述内容，你们对如何使用JS实现IE8浏览器input输入数字有进一步的了解吗？如果还想了解更多知识或者相关内容，请关注亿速云行业资讯频道，感谢大家的支持。
