广告
返回顶部
首页 > 资讯 > 前端开发 > node.js >jquery如何设置只能填数字
  • 785
分享到

jquery如何设置只能填数字

2024-04-02 19:04:59 785人浏览 薄情痞子
摘要

本篇内容介绍了“Jquery如何设置只能填数字”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!

本篇内容介绍了“Jquery如何设置只能填数字”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!

jquery中,可用replace()方法和正则表达式来设置只能填写数字,replace()方法用于替换一个与正则表达式匹配的子串,当填写内容不是数字时就不显示,语法为“指定元素对象.val().replace(/[^\d]/g,"")”。

教程操作环境:windows10系统、jquery3.2.1版本、Dell G3电脑。

jquery怎样设置只能填数字

有的input文本框需要做一些判断,只能输入数字,这个判断可以通过正则表达式进行判断,当用户输入的内容不是数字就不在input文本框显示,让我们来看一下jq如何设置只能输入数字。

语法:

$('input').on('input propertychange', function(e) {
var text = $(this).val().replace(/[^\d]/g, "");
$(this).val(text)   
})

新建html文件。

在html文件上创建一个input输入框,然后设置输入框的大小。

代码:<input type="text" style="width: 190px;">

引入jquery.min.js文件。

代码:<script type="text/javascript" src="jquery-1.9.1.min.js"></script>

用正则表达式判断用户每次输入的内容,当内容不是数字就不显示。

代码:

<script>
$(function(){
$('input').on('input propertychange', function(e) {
var text = $(this).val().replace(/[^\d]/g, "");
$(this).val(text)   
})
})
</script>

如图:

jquery如何设置只能填数字

保存后html文件后,适用浏览器打开进行测试,发现输入非数字的内容无法在文本框上显示。如图:

jquery如何设置只能填数字

只需要把所有代码复制到新建的html文件上粘贴,保存后即可看到效果。

所有代码:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="js/jquery-3.3.1.min.js" ></script>
<script>
$(function(){
$('input').on('input propertychange', function(e) {
var text = $(this).val().replace(/[^\d]/g, "");
$(this).val(text)   
})
})
</script>
</head>
<body>
<input type="text" style="width: 190px;">
</body>
</html>

“jquery如何设置只能填数字”的内容就介绍到这里了,感谢大家的阅读。如果想了解更多行业相关的知识可以关注编程网网站,小编将为大家输出更多高质量的实用文章!

--结束END--

本文标题: jquery如何设置只能填数字

本文链接: https://www.lsjlt.com/news/88146.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
  • jquery如何设置只能填数字
    本篇内容介绍了“jquery如何设置只能填数字”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成! ...
    99+
    2022-10-19
  • html5如何设置input只能输入数字
    这篇文章主要介绍html5如何设置input只能输入数字,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完! 在html5中,可以通过input标签的type属...
    99+
    2022-10-19
  • html如何设置input只能输入数字
    这篇文章主要介绍“html如何设置input只能输入数字”,在日常操作中,相信很多人在html如何设置input只能输入数字问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”ht...
    99+
    2022-10-19
  • 怎么在javascript中设置只能输入数字
    本篇文章给大家分享的是有关怎么在javascript中设置只能输入数字,小编觉得挺实用的,因此分享给大家学习,希望大家阅读完这篇文章后可以有所收获,话不多说,跟着小编一起来看看吧。javascript设置只能输入数字的方法:新建一个html...
    99+
    2023-06-14
  • 怎么在html中设置input只能输入数字
    今天就跟大家聊聊有关怎么在html中设置input只能输入数字,可能很多人都不太了解,为了让大家更加了解,小编给大家总结了以下内容,希望大家根据这篇文章可以有所收获。html input标签 要求只能输入纯数字在input标签添加oninp...
    99+
    2023-06-15
  • ​WPF怎么设置文本框只能输入数字
    在WPF中,可以通过以下代码将文本框设置为只能输入数字: 使用TextBox控件,并将其输入限制为数字: 在代码-behi...
    99+
    2023-10-22
    ​WPF
  • 如何设置html文本框input只能输入数字和小数点
    小编给大家分享一下如何设置html文本框input只能输入数字和小数点,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧! 限制ht...
    99+
    2022-10-19
  • jquery如何设置数组转字符串
    本篇内容主要讲解“jquery如何设置数组转字符串”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“jquery如何设置数组转字符串”吧! ...
    99+
    2022-10-19
  • jquery如何给text文本框设置只读状态
    这篇文章主要介绍了jquery如何给text文本框设置只读状态的相关知识,内容详细易懂,操作简单快捷,具有一定借鉴价值,相信大家阅读完这篇jquery如何给text文本框设置只读状态文章都会有所收获,下面我...
    99+
    2022-10-19
  • jquery button如何设置按钮文字
    本篇内容介绍了“jquery button如何设置按钮文字”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!什么是jQuery ButtonjQ...
    99+
    2023-07-05
  • jQuery如何设置IE指定的功能
    这篇文章将为大家详细讲解有关jQuery如何设置IE指定的功能,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。设置IE指定的功能if ($.browser.msie) { //...
    99+
    2023-06-27
  • winform文本框只能输入数字如何解决
    要使WinForm文本框只能输入数字,可以使用以下方法之一:1. 使用KeyPress事件:在文本框的KeyPress事件中,检查按...
    99+
    2023-09-29
    winform
  • jquery如何表单验证不能为数字
    这篇文章主要介绍“jquery如何表单验证不能为数字”,在日常操作中,相信很多人在jquery如何表单验证不能为数字问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”jquery...
    99+
    2022-10-19
  • javascript如何设置文本框不能输入数字
    本篇内容介绍了“javascript如何设置文本框不能输入数字”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成...
    99+
    2022-10-19
  • js如何限制input只能输入有效的数字
    这篇文章给大家分享的是有关js如何限制input只能输入有效的数字的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。第一种方法:通过字符搜索判断等实现,适合功能增强<!doct...
    99+
    2022-10-19
  • js如何实现限制输入框只能输入数字
    这篇文章主要介绍了js如何实现限制输入框只能输入数字,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。例子:html代码<input ty...
    99+
    2022-10-19
  • 如何设置Vista系统只能识别我指定的U盘
         现在U盘已经很普及了,几十元就可以买到1G的,而且很多手机功能也带U盘功能了,所以想从别人的电脑里面复制出一些文件,那是非常简单的事情,这样对电脑里面资料就有很大的威胁,...
    99+
    2023-05-25
    Vista U盘 U 系统
  • Windows7任务栏不能显示缩略图只显示文字是怎么回事?如何设置?
    Windows7任务栏不能显示缩略图只显示文字是怎么回事如何设置将鼠标靠上任务栏已经打开的窗口的图标,会有两种显示方式。一种是显示文字,一种是显示缩略图。前者一般是显卡更新到最匹配的状态,从而打不开Windows7操作系...
    99+
    2023-06-06
    Windows7任务栏不能显示缩略图 任务 文字 缩略图 怎么回事
  • php数组如何设置数字下标
    本文小编为大家详细介绍“php数组如何设置数字下标”,内容详细,步骤清晰,细节处理妥当,希望这篇“php数组如何设置数字下标”文章能帮助大家解决疑惑,下面跟着小编的思路慢慢深入,一起来学习新知识吧。数字下标的创建在PHP中,数字下标的创建非...
    99+
    2023-07-05
  • python如何设置Pyplot的动态rc参数、绘图的填充
    今天小编给大家分享一下python如何设置Pyplot的动态rc参数、绘图的填充的相关知识点,内容详细,逻辑清晰,相信大部分人都还太了解这方面的知识,所以分享这篇文章给大家参考一下,希望大家阅读完这篇文章后有所收获,下面我们一起来了解一下吧...
    99+
    2023-07-02
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作