input只可输入数字,IE8及以上+主流浏览器
今天处理一个表单的限制问题,然后测试说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,默认显示 var cgl_inputNumberZero = $(this).data('cglzero') || 'yes'; // 定义小数点后几位数,这里直接截取,不是四舍五入 var cgl_inputNumberDigits = $(this).data('cgldigits') || 0; // 是否支持负数 yes:支持 fasle:不支持 var cgl_inputNumberPoNe = $(this).data('cglpone') || 'no'; /*console.log( '小数点:' + cgl_inputNumberDigits + '\n' + '正负数:' + cgl_inputNumberPoNe + '\n' + '0显示:' + cgl_inputNumberZero)*/ // 找到input的值 var cgl_inputNumberValReal = $(this).val(); // 对input里面的数字进行循环查询 for (var i = 0; i < cgl_inputNumberValReal.length; i++) { // 求每个字的charCodeAt值 var cgl_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] }else if (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>
- 点赞
- 收藏
- 分享
- 文章举报
- 实时监听input输入的变化(兼容主流浏览器)
- 实时监听input输入的变化(兼容主流浏览器)【转】
- [转] 实时监听input输入的变化(兼容主流浏览器)
- jquery方法限制输入框只能输入数字,兼容各大主流浏览器
- 实时监听input输入的变化(兼容主流浏览器)
- 调整input里面的输入光标大小并兼容主流浏览器
- 实时监听input输入的变化(兼容主流浏览器)
- input只能输入数字和只能输入数字和小数点,及保留两位小数没有则为00,保留两位小数,小数前的数超出三位以逗号隔开
- jquery限制文本框只能输入数字的方法,适用多种浏览器
- EditTexit只输入数字 android:digits 与始终隐藏软键盘setInputType冲突解决
- 【转】 只能输入数字, 正则限制input框只能输入数字,英文等
- 使 html input 标签只能输入数字
- 让输入框input只能输入数字
- 限制HTML的input只能输入数字、英文、汉字...
- JQuery自动轮播效果,带字幕说明,带底部滚动圈圈,兼容IE7以上所有主流浏览器。(魔兽背景哟亲)
- input只能输入数字
- Input 只能输入数字,数字和字母等的正则表达式
- JS获取input标签的text值、JS获取下拉框内容、input控制只能输入数字等问题汇总
- 又一个jquery轮播效果,焦点图,带数字显示序号,这个可以添加对应标题在图片上,支持主流浏览器
- 在不同浏览器中,input里面的输入光标大小表现形式却大不相同