Loading [MathJax]/jax/output/CommonHTML/config.js
前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >jQuery 文本框中只能输入正整数

jQuery 文本框中只能输入正整数

原创
作者头像
IT工作者
修改于 2022-02-23 01:53:18
修改于 2022-02-23 01:53:18
3.2K00
代码可运行
举报
文章被收录于专栏:程序技术知识程序技术知识
运行总次数:0
代码可运行

文本框的输入的内容可能会有各种限制,比如文本框中只能够输入正整数。

下面就是一段能够实现此功能的代码实例,需要的可以做一下参考。

代码实例如下:

实例1

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>前端</title>
<script src="/jquery/1.9.0/jquery.js"></script>
<script>
$(document).ready(function(){
  $("input").keyup(function(){
    $(this).val($(this).val().replace(/\D|^0/g,''));
  }).bind("paste",function(){
    return false;
  })
});
</script>
</head>
<body>
<input type="text"/>
</body>
</html>

实例2

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
$('.skuStock').keyup(function(){
	$(this)[0].value=$(this)[0].value.replace(/^(0+)|[^\d]+/g,'')
})

实例3

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
//限制键盘只能按数字键、小键盘数字键、退格键
$("#txtQty").keydown(function (e) {
var code = parseInt(e.keyCode);
if (code >= 96 && code <= 105 || code >= 48 && code <= 57 || code == 8) {
return true;
} else {
return false;
}
})

//文本框输入事件,任何非正整数的输入都重置为1
$("#txtQty").bind("input propertychange", function () {
if (isNaN(parseFloat($(this).val())) || parseFloat($(this).val()) <= 0) $(this).val(1);
})

实例4

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<input 
onkeyup="if(this.value.length==1){this.value=this.value.replace(/[^1-9]/g,'')}else{this.value=this.value.replace(/\D/g,'')}" 
onafterpaste="if(this.value.length==1){this.value=this.value.replace(/[^1-9]/g,'')}else{this.value=this.value.replace(/\D/g,'')}"
>

上面的代码实例实现了我们的要求,下面介绍一下它的实现过程。

一.代码注释:

(1).$(document).ready(function(){}),当文档结构完全加载完毕再去执行函数中的代码。

(2).$("input").keyup(function(){}),为input元素注册keyup事件处理函数。

(3).$(this).val($(this).val().replace(/\D|^0/g,''));,将非数字或者以0为开头的替换为空。

(4)$("input").bind("paste",function(){

  return false;

}),

为文本框注册paste事件处理函数,这个是为了防止对文本框复制黏贴操作。

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
文本框根据输入内容自适应高度
jQuery实现 (function($){ $.fn.autoTextarea = function(options) { var defaults={ maxHeight:null,//文本框是否自动撑高,默认:null,不自动撑高;如果自动撑高必须输入数值,该值作为文本框自动撑高的最大高度 minHeight:$(this).height() //默认最小高度,也就是文本框最初的高度,当内容高度小于这个高度的时候,文本以这个高度显示 }; var opts = $.exten
lilugirl
2019/05/28
1.2K0
input输入框的限制
该事件与 v-on:input 事件的区别在于:input 事件是实时监控的,每次输入都会调用,而@keyup.enter 事件则是在 pc 上需要点击回车键触发,而在手机上则是需要点击输入键盘上的确定键才可触发。
leader755
2022/03/09
2.4K0
jQuery使用技巧
使用回调方法的缺点之一是当执行类库中的方法后,上下文对象被设置到另外一个元素,比如,执行下面代码:
零式的天空
2022/03/22
1.4K0
input文本框输入时正则判断
1、只能输入数字 文本框只能输入数字代码(小数点也不能输入) 方式一: <input type="text"name="number" id="number" value="1" maxlength="8" title="nb" onkeyup="value=value.replace(/[^\d]/g,'')" onbeforepaste="c
Java帮帮
2018/12/18
1.6K0
input文本框输入时正则判断
简单的文本框输入自动提示
简单的文本框输入自动提示--输入的时候可以直接异步加载数据库中匹配的项,然后显示出来。
书童小二
2018/09/03
3.5K0
简单的文本框输入自动提示
50个必备的实用jQuery代码段
本文会给你们展示50个jquery代码片段,这些代码能够给你的javascript项目提供帮助。其中的一些代码段是从jQuery1.4.2才开始支持的做法,另一些则是真正有用的函数或方法,他们能够帮助你又快又好地把事情完成。 如何修改jQuery默认编码(例如默认UTF-8改成改GB2312): $.ajaxSetup({ ajaxSettings:{ contentType:"application/x-www-form-urlencoded;chartset=GB2312"} }); 解决
大师级码师
2021/09/19
6.9K0
java文本框获得输入焦点_文本框获得焦点和失去焦点的判断代码
对于元素的焦点事件,我们可以使用jQuery的焦点函数focus(),blur()。
全栈程序员站长
2022/09/14
4.2K0
jQuery基础
使用jQuery快速高效制作网页交互特效 第一章-JavaScript基础 上机练习1 练习——统计包含“a”或“A”的字符串的个数 需求说明:使用数组存储一组字符串,并统计包含“a”或“A”的字符串的个数 关键代码: <script type="text/javascript"> var a = ["America","Greece","Britain","Canada","China","Egypt"]; var count = 0; for(var i in a) {
星辰xc
2022/04/09
7.6K0
jQuery基础
input输入框自动消除空格
今天遇到了一个问题,用户在在前端的input里面输入id的时候,多写了个空格,数据库里面就找不到id了,所以无法获取输入的id所绑定的标签位置在哪里,现在需要在前端做一个处理,input框输入的数值里面,会自动消除空格。
王小婷
2019/05/15
4.2K0
input输入框自动消除空格
[jQuery学习系列五 ]5-Jquery学习五-表单验证
前言 最近总是有一个感觉,虽然这些东西都自己学习并一个案例一个案例的去验证过了。但是总觉得不写成博客记录下来这些都不是自己的东西(心理作用,哈哈). 所以每当学习或者复习相关的知识我都喜欢记录下来,下面开始到jQuery的表单验证。 这里的表单验证都是最简单最基础的方式去完成,当然jQuery还有一些比较好的验证框架,这里就不提及了。 一,字段验证: 1.1 字段非空 <form action="" method="post" id ="myform"> <p id="error">姓名不能为空!
一枝花算不算浪漫
2018/05/18
1.2K0
JavaScript学习笔记(四)—— jQuery入门
子元素伪类选择器就是选择某一个元素下面的子元素的方式,在jQuery中,子元素伪类选择器分为两大类:
wsuo
2020/07/31
11.3K0
WEB入门之十四 jQuery事件
JavaScript是事件驱动型的编程语言,即JavaScript和HTML之间的交互是通过用户和浏览器操作页面时触发的事件来驱动进行的。使用传统的JavaScript就能处理这些交互,但是jQuery增加并扩展了JavaScript事件处理机制,使其使用起来更加优雅和灵活。本章我们重点讲解jQuery中的各种事件以及事件的绑定。
张哥编程
2024/12/17
2890
WEB入门之十四   jQuery事件
文本框的属性监测
之前很简单的认为对input的value监测就用2个事件可以搞定兼容性,知道我看了司徒正美的这篇博客,还是感慨自己不够深入,接触的太少。   对于IE全系列,可以采用onpropertychange属性监测   对于 gte IE9 和W3c浏览器,则通过input事件进行监测。   但是IE9的兼容性可能会出现问题。   oninput 事件在用户输入、退格(backspace)、删除(delete)、剪切(ctrl + x)、粘贴(ctrl + v)及鼠标剪切与粘贴时触发(在 IE9 中只在输入、粘贴、
欲休
2018/03/15
1.9K0
禁止在input中输入中文
提示:设置ime-mode为disabled的意思是禁止在输入时禁止用户激活输入中文,韩文,日文等的输入法(IME)状态,因为这个只能检测到键盘的输入,对通过鼠标操作的粘贴和拖放无效。
崔笑颜
2020/06/08
4.2K0
统计字数oninput?keyup?onchange?
当元素的值发生改变时,会触发change事件。该事件仅适用于<input>, <select>和<textarea> 元素。当用于<select>元素时,change 事件会在选择某个选项时发生。当用于<input>或<textarea>时,该事件会在元素失去焦点时发生。
奋飛
2019/08/15
2.8K0
jQuery最方便的前端验证方式2种(非空验证与比较验证)
字符串长度限制、判断字符长度 、js 限制输入、限制不能输入、textarea 长度限制
红目香薰
2023/04/06
2.3K0
jQuery最方便的前端验证方式2种(非空验证与比较验证)
在js(jquery)中获得文本框焦点和失去焦点的方法
对于元素的焦点事件,我们可以使用jQuery的焦点函数focus(),blur()。focus():得到焦点时使用,和javascript中的onfocus使用方法相同。 如:
一朵灼灼华
2022/08/05
10.5K0
【笔记】移动端H5数字键盘input type=number的处理(IOS和Android)
在Vue中的项目,基于VUX-UI开发,一个常见的需求: 1、金额输入框 2、弹出数字键盘 3、仅支持输入两位小数,限制最大11位数,不允许0开头   后续:与UI沟通后, 思路调整为限制输入,并减少正则替换输入值出现的闪动。后续改动如下,注意点如下: 1、处理思路   A。在用户输入的键盘事件中,对于不符合的输入,阻止默认行为和事件冒泡。     不符合输入的规则如下:     1)当前输入框中的长度大于等于配置的max     2)非数字和小数点     3)当前输入框中已存在小数点,或第一位输入
SmileSmith
2018/04/16
10.6K0
jQuery 来处理常见的输入框的事件
根据实际情况修改选择器以匹配你的输入框。通过调用 .on() 方法来绑定事件,并提供一个事件处理函数。当事件触发时,相应的函数将执行。
王小婷
2023/09/23
5370
表单文本框的使用(二) 输入过滤(合成事件)
输入框本身是没有这个功能的,但是我们可以通过JavaScript来实现。 我们能实现向输入框中输入字符,依靠的是键盘事件,所以可以通过添加键盘事件,然后根据事件对象的信息来判断符不符合条件,不符合条件,就通过event.preventDefault阻止默认事件,即阻止输入。
赤蓝紫
2023/03/16
1.5K0
表单文本框的使用(二) 输入过滤(合成事件)
相关推荐
文本框根据输入内容自适应高度
更多 >
领券
💥开发者 MCP广场重磅上线!
精选全网热门MCP server,让你的AI更好用 🚀
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
本文部分代码块支持一键运行,欢迎体验
本文部分代码块支持一键运行,欢迎体验