[原生 js 训练计划] 限制只能输入数字

最新推荐文章于 2024-05-09 15:05:20 发布

Gavincoder

最新推荐文章于 2024-05-09 15:05:20 发布

阅读量147

点赞数

分类专栏：大前端 Javascript 原生 js 训练计划

本文链接：https://blog.csdn.net/weixin_39200308/article/details/95799571

版权

大前端同时被 3 个专栏收录

36 篇文章 0 订阅

订阅专栏

Javascript

28 篇文章 0 订阅

订阅专栏

原生 js 训练计划

8 篇文章 0 订阅

订阅专栏

欢迎大家加入我的github项目,一起学习，一起发展

---> 全栈工程师进阶学习站
---> 我的前端学习笔记
--->行业内最新最群的报告，工作日每日更新

—>原生 js 训练计划

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>限制只能输入数字</title>
</head>
<body>
    
<h2>限制只能输入数字</h2>
<form action="#">
<p>1:通过设置 input 类型为 number 来限制</p>
<input type="number" placeholder="只能输入数字"> <br>
<p>2:通过HTML 5 中的 pattern 属性来限制</p>
<input type="text"  placeholder="只能输入数字" pattern="[0-9]*"> <br>
<p>3:通过 正则+js 事件来限制</p>
<input type="text" placeholder="只能输入数字" id="banNumber"> <br>
<br>
<input type="submit"  value="提交">
</form>
</body>

<script>
window.onload=function(){

var banNumber=document.getElementById("banNumber");
var clearNumber=function(_this){
    var _v=_this.value;
    //过滤数字
    _this.value=_v.replace(/\D/g,"");
}

//监听获取焦点事件
banNumber.onfocus=function(){
    clearNumber(this);
}
//监听键盘事件
banNumber.onkeyup=function(){
    clearNumber(this);
}
//监听失去焦点时间
banNumber.onblur=function(){
    clearNumber(this);
}
}

</script>
</html>

```闲聊时刻

10年短信公司，互联网100强企业！主营业务：短信（国内和国际）App H5一键免密登录，防薅羊毛接口，图片OCR，空号检测，活跃号检测，人证核验，活体检测，高防ddos攻击等等200多个企业服务接口！需要的联系他13592366783 官方链接：https://zz.253.com/v5.html#/register?uid=1953

自己公司需求偶然间用了一家第三方接口供应商，产品应有尽有，很齐全，对接文档非常详细，彼此都很节约时间，主要非常稳定，包括服务方面很给力，有兴趣的博友，可以联系他，算是对合作伙伴的支持了

Gavincoder

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
[原生 js 训练计划] 限制只能输入数字

欢迎大家加入我的github项目,一起学习，一起发展--->全栈工程师进阶学习站--->我的前端学习笔记--->行业内最新最群的报告，工作日每日更新 —>原生 js 训练计划<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8">...
复制链接

扫一扫