对输入框输入的数字进行格式控制，是很实用的效果

最新推荐文章于 2024-07-18 11:48:33 发布
最新推荐文章于 2024-07-18 11:48:33 发布
阅读量93 收藏
点赞数
文章标签： javascript ViewUI
原文链接：http://www.cnblogs.com/Godblessyou/archive/2010/07/17/1779395.html
版权
<HTML> <HEAD> <META http-equiv='Content-Type' content='text/html; charset=gb2312'> <TITLE>对输入框输入的数字进行格式控制，是很实用的效果</TITLE> </HEAD> <BODY > <script type='text/javascript'> // [dFilter] - A Numerical Input Mask for JavaScript // Written By Dwayne Forehand - March 27th, 2003 // Please reuse & redistribute while keeping this notice. var dFilterStep function dFilterStrip (dFilterTemp, dFilterMask) { dFilterMask = replace(dFilterMask,'#',''); for (dFilterStep = 0; dFilterStep < dFilterMask.length++; dFilterStep++) { dFilterTemp = replace(dFilterTemp,dFilterMask.substring(dFilterStep,dFilterStep+1),''); } return dFilterTemp; } function dFilterMax (dFilterMask) { dFilterTemp = dFilterMask; for (dFilterStep = 0; dFilterStep < (dFilterMask.length+1); dFilterStep++) { if (dFilterMask.charAt(dFilterStep)!='#') { dFilterTemp = replace(dFilterTemp,dFilterMask.charAt(dFilterStep),''); } } return dFilterTemp.length; } function dFilter (key, textbox, dFilterMask) { dFilterNum = dFilterStrip(textbox.value, dFilterMask); if (key==9) { return true; } else if (key==8&&dFilterNum.length!=0) { dFilterNum = dFilterNum.substring(0,dFilterNum.length-1); } else if ( ((key>47&&key<58)||(key>95&&key<106)) && dFilterNum.length<dFilterMax(dFilterMask) ) { dFilterNum=dFilterNum+String.fromCharCode(key); } var dFilterFinal=''; for (dFilterStep = 0; dFilterStep < dFilterMask.length; dFilterStep++) { if (dFilterMask.charAt(dFilterStep)=='#') { if (dFilterNum.length!=0) { dFilterFinal = dFilterFinal + dFilterNum.charAt(0); dFilterNum = dFilterNum.substring(1,dFilterNum.length); } else { dFilterFinal = dFilterFinal + ""; } } else if (dFilterMask.charAt(dFilterStep)!='#') { dFilterFinal = dFilterFinal + dFilterMask.charAt(dFilterStep); } // dFilterTemp = replace(dFilterTemp,dFilterMask.substring(dFilterStep,dFilterStep+1),''); } textbox.value = dFilterFinal; return false; } function replace(fullString,text,by) { // Replaces text with by in string var strLength = fullString.length, txtLength = text.length; if ((strLength == 0) || (txtLength == 0)) return fullString; var i = fullString.indexOf(text); if ((!i) && (text != fullString.substring(0,txtLength))) return fullString; if (i == -1) return fullString; var newstr = fullString.substring(0,i) + by; if (i+txtLength < strLength) newstr += replace(fullString.substring(i+txtLength,strLength),text,by); return newstr; } </script> <form name="fred" action="fred.htm" method="post"> <table> <tr> <td>输入数字:</td> <td><input value="" type="text" onKeyDown="javascript:return dFilter (event.keyCode, this, '###-##-####');" style="font-family:verdana;font-size:10pt;width:110px;"></td> </tr> <tr> <td>电话号码:</td> <td><input value="" type="text" onKeyDown="javascript:return dFilter (event.keyCode, this, '(###) ###-####');" style="font-family:verdana;font-size:10pt;width:110px;"></td> </tr> <tr> <td>邮政编码:</td> <td><input value="" type="text" onKeyDown="javascript:return dFilter (event.keyCode, this, '###-###');" style="font-family:verdana;font-size:10pt;width:110px;"></td> </tr> </table> </form> </BODY></HTML>

<!-- 要实现此效果需要 1 个步骤： -->

<!-- 第 1 步： -->
<!-- 把下面的代码加到<BODY></BODY>区域中： -->

<script type='text/javascript'>
// [dFilter] - A Numerical Input Mask for JavaScript
// Written By Dwayne Forehand - March 27th, 2003
// Please reuse & redistribute while keeping this notice.

var dFilterStep

function dFilterStrip (dFilterTemp, dFilterMask)
{
dFilterMask = replace(dFilterMask,'#','');
for (dFilterStep = 0; dFilterStep < dFilterMask.length++; dFilterStep++)
{
dFilterTemp = replace(dFilterTemp,dFilterMask.substring(dFilterStep,dFilterStep+1),'');
}
return dFilterTemp;
}

function dFilterMax (dFilterMask)
{
dFilterTemp = dFilterMask;
for (dFilterStep = 0; dFilterStep < (dFilterMask.length+1); dFilterStep++)
{
if (dFilterMask.charAt(dFilterStep)!='#')
{
dFilterTemp = replace(dFilterTemp,dFilterMask.charAt(dFilterStep),'');
}
}
return dFilterTemp.length;
}

function dFilter (key, textbox, dFilterMask)
{
dFilterNum = dFilterStrip(textbox.value, dFilterMask);

if (key==9)
{
return true;
}
else if (key==8&&dFilterNum.length!=0)
{
dFilterNum = dFilterNum.substring(0,dFilterNum.length-1);
}
else if ( ((key>47&&key<58)||(key>95&&key<106)) && dFilterNum.length<dFilterMax(dFilterMask) )
{
dFilterNum=dFilterNum+String.fromCharCode(key);
}

var dFilterFinal='';
for (dFilterStep = 0; dFilterStep < dFilterMask.length; dFilterStep++)
{
if (dFilterMask.charAt(dFilterStep)=='#')
{
if (dFilterNum.length!=0)
{
dFilterFinal = dFilterFinal + dFilterNum.charAt(0);
dFilterNum = dFilterNum.substring(1,dFilterNum.length);
}
else
{
dFilterFinal = dFilterFinal + "";
}
}
else if (dFilterMask.charAt(dFilterStep)!='#')
{
dFilterFinal = dFilterFinal + dFilterMask.charAt(dFilterStep);
}
// dFilterTemp = replace(dFilterTemp,dFilterMask.substring(dFilterStep,dFilterStep+1),'');
}


textbox.value = dFilterFinal;
return false;
}

function replace(fullString,text,by) {
// Replaces text with by in string
var strLength = fullString.length, txtLength = text.length;
if ((strLength == 0) || (txtLength == 0)) return fullString;

var i = fullString.indexOf(text);
if ((!i) && (text != fullString.substring(0,txtLength))) return fullString;
if (i == -1) return fullString;

var newstr = fullString.substring(0,i) + by;

if (i+txtLength < strLength)
newstr += replace(fullString.substring(i+txtLength,strLength),text,by);

return newstr;
}

</script>
<form name="fred" action="fred.htm" method="post">
<table>
<tr>
<td>输入数字:</td>
<td><input value="" type="text" onKeyDown="javascript:return dFilter (event.keyCode, this, '###-##-####');" style="font-family:verdana;font-size:10pt;width:110px;"></td>
</tr>
<tr>
<td>电话号码:</td>
<td><input value="" type="text" onKeyDown="javascript:return dFilter (event.keyCode, this, '(###) ###-####');" style="font-family:verdana;font-size:10pt;width:110px;"></td>
</tr>
<tr>
<td>邮政编码:</td>
<td><input value="" type="text" onKeyDown="javascript:return dFilter (event.keyCode, this, '###-###');" style="font-family:verdana;font-size:10pt;width:110px;"></td>
</tr>
</table>
</form>

转载于:https://www.cnblogs.com/Godblessyou/archive/2010/07/17/1779395.html

weixin_33726313
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
【转】input输入框的各种样式
weixin_30821731的博客
05-05 9802
输入框景背景透明：<input style="background:transparent;border:1px solid #ffffff"> 鼠标划过输入框，输入框背景色变色：<INPUT value="Type here" NAME="user_pass" TYPE="text" SIZE="29" onmouseover="this.style.borderColor=...
输入框设置输入规则
玖玖年的程序猿
06-09 2826
在一些特定的环境中我们会需要用户输入的数据符合我们的要求. 如:输入身份证号 手机号 车牌等一系列有规律的数据, 普通的输入框是你输入什么都可以的 若这是录入名字或文本是没问题的,但要是别的就不行了,就不如销售折扣就不可以出现除.和数字外的任何字符. 在我们编程计算中若出现上图的数据,计算机运算不了就会报错,所以我们就要给input加上点限制. 在我们输入完后正则会将符合规则的字符替换成我们...
表单的个性化
::打盹的青蛙专栏::
01-03 1209
想必大家在页面都使用过表单，如果你对单调的表单控制单元不满意，不妨看看以下几条技巧：　　1、表单文本输入的移动选择：在文本输入栏中，如果加入了提示，来访者往往要用鼠标选取后删除，再输入有用的信息。其实只要加入onMouseOver="this.focus()" onFocus="this.select()" 代码到 中，一切就会变得简单多了，如：Input English..　　类似的，可以加入
php中文本输入 允许空格,表单验证,javascript_如何对输入框中输入内容进行限制 eg:只能输入数字加空格的格式，其他就弹出提示错误，表单验证,javascript - phpStudy...
weixin_35698059的博客
04-02 121
如何对输入框中输入内容进行限制 eg:只能输入数字加空格的格式，其他就弹出提示错误function s() {var radios = document.querySelectorAll('input[name=sort]');var result = document.getElementById("result");var arr = document.getElementById("arr"...
限制输入框输入类型
weixin_42287935的博客
03-28 910
一、只能输入数字 转载地址：传送门 原始方法 <input type="text" oninput="value=value.replace(/\D/g,'')" placeholder="请输入数字" v-model="value"> 封装成方法 <input type="text" v-on:input="value=onlyNum(value)" placeholder="请输入数字" v-model="value"> onlyNum(value){
输入框input样式，各种效果齐全
11-11
输入框input样式，各种效果齐全
微信小程序实现MUI数字输入框效果
12-29
本文实例为大家分享了微信小程序实现MUI数字输入框的具体代码，供大家参考，具体内容如下 效果图 WXML 默认 <button class=tui-number-cell bindtap=nextNum>-</button> <input class=tui-...
Android金额输入框只允许输入小数点后两位效果
01-20
在Android开发中，有时我们需要创建一个特定的输入框，用于用户输入金额，要求只能输入小数点后最多两位的数字。以下是如何实现这样一个功能的详细步骤： 首先，我们需要创建一个新的类，继承自`AppCompatEditText`...
数字放大镜input输入数字放大镜效果代码.zip
07-11
描述中提到的"数字放大镜input输入数字放大镜效果代码"进一步强调了这个代码是专门针对输入框（input元素）设计的，当用户在input元素中输入数字时，会有一个类似放大镜的效果，将用户聚焦的数字放大显示，从而提高...
Sortable.js板块拖拽示例
w11111xxxl的博客
07-14 773
ghostClass: 'blue-background-class' // 拖动时元素的样式类。group: 'shared', // 允许与其它具有相同组名的元素交互。-- 引入 Sortable.js 的 CSS 和 JS 文件 -->width: 150px;/* 减少宽度 */height: 70px;/* 设置高度 */-- 引入 Sortable.js 的 JS 文件 -->animation: 150, // 动画速度。// 初始化 Sortable。
ReactRouter v6升级的步骤
feixin369的博客
07-14 419
React Router v6 引入了一个 Routes组件，它有点像Switch，但功能要强大得多。与Switch相比，RoutesReact.lazy。
vue搜索框过滤--- computed、watch区别
学习笔记分享给大家
07-16 333
计算属性computed适用于需要基于其他数据动态变化，并且需要缓存的场景。侦听器watch适用于需要响应数据变化，执行异步或开销较大操作的场景。方法methods适用于定义组件的具体行为，包括事件处理和业务逻辑等。
react 快速入门思维导图
weixin_44565776的博客
07-18 114
只要掌握了这些react技能，基本就可以熟练使用react了
自定义 Hooks 在 Vue3 中的应用和重要性
CodeQi技术小栈的博客
07-16 972
自定义Hooks是Vue3提供的一种将可复用逻辑提取到独立函数中的方式。这不仅可以减少代码的重复，还能让你的代码更加清晰易读，维护起来也更加方便。在这篇文章中，我将通过详细的步骤和实例，带你深入了解如何在Vue3中使用自定义Hooks，以及它们在实际项目中的应用和重要性。首先，我们来看一下如何创建一个简单的自定义Hook。在Vue3中，自定义Hook本质上就是一个返回特定功能的函数。让我们从一个简单的计数器例子开始。
ios CCUIAlertActivityView.m
编程语言技巧经验分享
07-17 486
// // CCUIAlertActivityView.m // CCFC // // #import "CCUIAlertActivityView.h" #import "CCNSNumber.h" #import "CCU
HOW - SVG 图标组件封装（Lucide React）
最新发布
weixin_58540586的博客
07-18 783
在中我们介绍过 “动态 Fetch CDN SVG 图标”，这种在开发者将需要用到 图标 依次上传到 CDN 再在项目通过请求引入使用的场景。但其实，更常见的做法还是统一维护一组 SVG 图标，然后将其封装成组件，直接在项目中通过 Import 的形式使用。
vue3配置代理
Joe world的博客
07-16 148
【代码】vue3配置代理。
小程序js 把链接转换为二维码
Carina的编程技术博客
07-18 179
1.要下载上面地址的插件包。
uniapp限制输入框只能输入数字
05-31
要限制输入框只能输入...在方法中，我们使用正则表达式 `/^[0-9]*$/` 匹配输入的内容是否为数字，如果不是数字，则使用 `replace` 方法将输入框中的非数字字符替换为空字符串，从而实现限制输入框只能输入数字的效果。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值