`

文本输入框只能输入数字(浮点)

阅读更多
有很多时候都会需要要求限制输入款的输入的,那么什么体验好点呢
如下是本人觉得比较好的体验:
  输入认为非法的字符自动覆盖,只保留正确的输入正确的文本
代码如下:
<input onkeyup="this.value=this.value.replace(/^\.|^0\d{1,}|\.{2,}|[^.\d]|\..*\./g,'');" onblur="this.value=this.value.replace(/\.$/g,'');"/>


说明如下:
在input原属添加两个监听事件(onkeyup,onblur)
其中在onkeyup添加的解释如下
1.
this.value=this.value.replace(/^\.|\.{2,}|[^.\d]|\..*\./g,'');

(^\.)所有以'.'开头的,
(\.{2,})'.'重复出现2次或以上的,
([^.\d])非数字的字符'.'除外,
(\..*\.)同时出现两个'.',
(^0\d{1,})以0开头的数字(单独输入一个0是可以的),都用空字符串替换掉
2.
this.value=this.value.replace(/(\d+)\.(\d\d).*$/,'$1.$2');

只保留小数点后面2位小数
然后是在onblur事件中添加的处理代码
this.value=this.value.replace(/\.$/g,'');

这个是处理当用户最后一个字符是'.'就不操作的时候,自动的帮用户去掉那个多余的字符串

下面顺带介绍一下几个页面事件
onkeyup事件会在键盘按键被松开时发生
onkeydown是按下的时候触发的
onfous页面控件获得焦点
onblur失去焦点
分享到:
评论

相关推荐

    C#.net中TextBox输入浮点型数字

    MessageBox.Show("只能输入数字", "提示", MessageBoxButtons.OK, MessageBoxIcon.Question); ((TextBox)sender).Text = ((TextBox)sender).Tag.ToString(); ((TextBox)sender).SelectionStart = ((TextBox)...

    jQuery 版本的文本输入框检查器Input Check

    ### jQuery 版本的文本输入框...通过以上信息,我们可以了解jQuery版本的文本输入框检查器Input Check的强大功能和使用细节,它为前端开发者提供了一个强大的工具来简化输入校验的工作,从而专注于更多业务逻辑的实现。

    Java浮点型计算器

    Swing包含诸如`JFrame`(主窗口)、`JButton`(按钮)、`JLabel`(标签)和`JTextField`(文本输入框)等组件,这些都是构建计算器界面的基础。 2. **事件监听**:为了响应用户的操作,比如点击按钮,我们需要为...

    对于input 框限定输入值为浮点型的js代码

    在这种情况下,通过限制input框只能接受浮点数的输入可以避免很多错误的发生。这里的“浮点数”指的是带有小数点的数值,它既可以是整数(没有小数部分),也可以是非整数(有小数部分)。 接下来,文档给出了实现...

    Javascript正则控制文本框只能输入整数或浮点数

    当type="text"时,它创建了一个单行的文本输入框。用户可以在其中输入文本,并通过键盘上的按键输入数据。 在Javascript中,可以通过document.getElementById()等方法获取到这个元素,并对其进行操作。比如修改它的...

    JS判断是否为数字,是否为整数,是否为浮点数的代码

    alert("请输入数字(例:0.02)"); input.rate.focus(); return false; } } ``` #### 二、函数方法 除了使用正则表达式之外,我们还可以编写函数来实现这些功能。这种方式更加灵活,可以根据具体需求进行定制。...

    第2章-变量类别.zip

    - 字符串变量用于处理文本输入,如标签文本、按钮文本或输入框的内容。 - 布尔型变量常用来追踪用户操作的状态,比如是否已点击某个按钮。 - 列表和字典可以用于存储多个选项或配置信息,比如在一个下拉菜单中列出多...

    小猪中英文数字转换易语言源码-易语言

    7. **用户界面**:虽然这个项目可能主要关注后台逻辑,但作为初学者教程,可能会包含简单的用户界面设计,如输入框和按钮,让用户可以直观地输入数字并查看转换结果。 通过学习和实践这个源码,初学者可以掌握...

    用OC storyboard写的计算器

    这些元素都是UI控件,如UIButton(按钮)、UILabel(标签)和UITextField(文本输入框)。 每个UIButton通常对应一个特定的数字或运算符,点击时会触发相应的事件。在OC代码中,我们可以通过实现UIControl的`- ...

    简单的计算器实行简单的加、减、乘、除

    在大多数情况下,这会是一个简单的文本输入框用于接收用户输入的两个数,以及四个按钮分别对应加、减、乘、除四种运算。用户输入数值后,点击相应的运算按钮,程序将执行相应的计算,并将结果显示在屏幕上。为了实现...

    简单计算器

    2. **控件使用**:在简单计算器中,常见的控件有Label(显示提示或结果)、TextBox(输入数字)、Button(代表运算符或功能)。每个控件都有其特定的属性(如Text、ForeColor、BackColor等)和事件(如Click、...

    Android APP数字解锁实例详解

    这样,用户就可以在数字键盘上输入数字,而屏幕上只显示星号,实现数字解锁的效果。 总的来说,实现Android应用的数字解锁功能涉及到自定义视图、触摸事件处理、以及界面交互设计。通过`PasswordTextView`与`...

    MFC计算器 vc计算器

    4. **CEdit**: 用于创建文本输入框,我们将用它来显示用户输入的数字和运算符。 5. **CButton**: 表示对话框上的按钮,包括数字键、运算符和括号。 **运算逻辑实现**: 1. **事件驱动编程**: MFC基于Windows的消息...

    MAX_labview_

    在“MAX.vi”的前面板上,可能会有两个输入控件(例如数字输入框或滑动条)代表要比较的两个数,以及一个显示控件(可能是一个标签或指示器)来显示计算出的最大值。用户可以通过交互式地输入两个数值,然后观察哪个...

    labview实现的简单计算器

    在前端面板上,数值输入通常由数显控件(Numeric Control)提供,用户可以在此输入数字。结果则通过数显指示器(Numeric Indicator)展示。在程序框图中,这些控件的连接线将数值传递给计算部分,并将结果返回到...

    Android银行按揭贷款基本计算功能源码.zip

    需要处理无效输入,如非数字输入、负数或零等。可以使用try-catch结构捕获`NumberFormatException`并提供友好的错误提示。 7. **UI更新** 使用`runOnUiThread()`确保UI操作在主线程中执行,避免因跨线程操作UI...

    labview入门教程

    控件是用户在前面板上与VI交互的元素,如按钮、滑块、文本输入框等。指示器则显示程序运行结果,如数值显示、波形图表等。 五、连线与数据流 在程序框图中,数据通过连线进行传递。数据流编程意味着只有当所有输入...

    基于python+pyqt5实现的邮件拦截系统源码(带GUI界面)+项目说明+pyqt5的学习笔记.zip

    3. *QDoubleSpinBox* ----- 浮点型采集 #3、组合框输入: 1. QComboBox ------ 组合框, 省份下城市选择可用 2. QFontComboBox --- 字体选择 #4、滑块: 1. QDial ----- // 旋钮滑块 2. QSlider ----------竖直...

Global site tag (gtag.js) - Google Analytics