JQuery Mobile - input 属性为 number，maxlength不起作用如何解决？

最新推荐文章于 2024-03-14 17:48:15 发布
转载 最新推荐文章于 2024-03-14 17:48:15 发布 · 288 阅读 · 0 ·
CC 4.0 BY-SA版权
原文链接：http://www.cnblogs.com/sunylat/p/10204021.html
文章标签：

#javascript #ViewUI

本文详细介绍了在HTML中使用input type='number'时遇到的maxlength属性失效问题，并提供了一个简单有效的解决方案，通过oninput事件限制输入长度。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

<input type="text"  maxlength="5" />   效果ok，当 <input type="number"  maxlength="5" />时maxlength失效，长度可以无限输入。

解放方案：

<input type="number" oninput="if(value.length>5)value=value.slice(0,5)" />　　

 

原文：https://blog.youkuaiyun.com/malan_wpf/article/details/50788275

转载于:https://www.cnblogs.com/sunylat/p/10204021.html

为什么input中的maxlength属性失效了
猿小白的博客
10-24 1万+
今天在遇到限制某个输入框的最大长度的需求，比如一个要求输入手机号的输入框：当时我是这样写的 <input type="text" placeholder="请输入手机号码" maxlength="11" /> 如果是上面的这种写法的话，maxlength属性是有效的。但是type=”text”有一个不好的体验，就是获取焦点后弹出的输入法是默认拼音的那种，不太适合此处要求纯数字的需...
maxLength属性不起作用了？可能是与InputFilter冲突了
dw610的博客
06-04 1万+
我们都知道，在做登录时，通常需要对用户名和密码的长度进行限制。而在做长度限制时最简单的方法就是在EditText（或者TextView）中设置maxLength属性。前段时间做了一个项目，需要做登录功能，我就在对EditText输入长度限制时用到了这个属性。后来需求又稍有变动，要求在输入时不接受空格和换行，也很简单，对输入框加上输入过滤就行了，如下： @Override public
input输入框为数字(number)类型时maxlength属性不起作用
小涛Dirge
11-12 2045
使用html代码解决 <input type="number" maxlength="5" oninput="if(value.length>5)value=value.slice(0,5)" /> 使用js代码解决 //输入框为数字类型时防止maxlength属性不起作用 $('input').bind('input propertychange', function() {...
input maxlength 属性不起作用
热门推荐
huch的博客
06-05 4万+
大家经常会遇到限制某个输入框的最大长度的需求，比如一个要求输入手机号的输入框： &amp;amp;lt;input type=&amp;quot;text&amp;quot; placeholder=&amp;quot;请输入手机号码&amp;quot; maxlength=&amp;quot;11&amp;quot; /&amp;amp;gt; 如果是上面的写法的话，maxlength属性是有效的。但是type=”text”有一个不好的体
限制字符串的长度，maxlength不起作用
旖旎绮罗的专栏
12-08 4722
有时候在text文本框，texearea中 属性maxlength会不起作用 这时候限制输入的字符串长度并截断，其中字符串（含中英文混合字符串） 如：   //计算字符长度，（含中文，英文混合字符） function CharLength(parameters){ var w=0; for (var i=0;i<
maxlenght 在input框上不起作用，可以无限输入
feng_strong的博客
11-20 826
1、<input type="number" placeholder="请输入手机号码" maxlength="11" />这种情况下怎么也不起作用 2、<input type="text" placeholder="请输入手机号码" maxlength="11" />，maxlength属性是有效的。但是type=”text”有一个不好的体验，就是获取焦点后弹出的输入法...
el-input maxlength无效失效不起作用问题
weixin_45827252的博客
03-14 3027
elementplus el-input maxlength无效问题
HTML标签的maxlength无效的原因
gz-郭小敏的博客
05-06 6399
定义和用法 maxlength 属性规定输入字段的最大长度，以字符个数计。 maxlength 属性与 <input type="text"> 或 <input type="password"> 配合使用。 maxlength 属性 用在<input type="number"> 是没效果的 语法 <input maxlength="...
当element-ui的input框type为number，maxlength不起作用的解决方案
Blues_han的博客
12-03 3471
当element-ui的input框type为number，maxlength不起作用的解决方案oninput截取字符串 oninput截取字符串 示例邮编： <el-input type='number' oninput="if(value.length>6)value=value.slice(0,6)" v-model.trim="ruleForm.postZip"></el-input> ...
解决ElementUI Input 输入框type=“number“时maxlength失效及可以输入字母e的问题
Java学习
04-14 7038
在使用Element前端组件时，发现把Input 输入框的type设置为number时，会造成maxlength属性失效的问题，可以输入很长的数字导致字段超长，另外min属性和max属性也只是限制输入框右边箭头调整的范围，根本无法限制住手动输入数值的范围，以及还可以输入“e”，“+”，“-”字符等问题。下面就来一一解决。
Unity_MobileInput：移动端原生InputField替代Unityy自带InputField
02-23
UnityMobileInput 介绍 github地址： : 功能 去掉移动端InputField自带的丑陋的输入框。 根据键盘高度自动调节输入框在UGUI中的位置（使用KeyHeightMono.cs）。 使用原始自带的输入框粘贴到InputField上，可以实现复制，粘贴，密码本，清除，完成，搜索，返回。 修复原版的Bug和改进 //改进：在MobileInputField.cs上增加该变量 public string text { get { return Text ;} set { Text = value ;} } //修复bug：在MobileInputField.cs上修改 //在此处修改为使用inputfield.text 之前使用inputfield.textcompoent 在密码类型的inputfield上 会出现bug this . SetTextNative
jQuery Mobile中的数据属性
10-10 1520
属性 描述 示例 data-ajax 该属性可以附加到链接、按钮或表单上。当该属性为false时，它会强制重新载入一个页面（绕过了ajax和页面转换）。例如，如果某个页面是使用ajax打开的，当通过链接在该页面上打开一个多页面文档时，会需要该属性。默认情况下，ajax导航是启用的。 多页面 data-add-back-btn 该属性被附加到一个页面容器上。当该属性为t
jquery将input type=number 值保留两位小数(四舍五入)
qq_37301074的博客
05-09 5227
背景： from表单填写商品价格时，需要写成两位小数类型，如 2.00 元； 实现： //form表单 <div class="form-line"> <lable><i>*</i>价格：</lable> <input type="number" class="number" name...
jquery input number类型 校验数值/输入数字开头不能为零
yzx3105的博客
07-19 2613
//限制长度 <input type="number" oninput="if(value.length>11)value=value.slice(0,11)" /> //限制最大值10 <input type="number" oninput="if(value>10)value=10" /> //限制最小值0 <input type="number" oninput="if(value<0)value=0" /> //长度2 最大值10 最
input使用maxlength报错
06-02 583
报错 Invalid prop: type check failed for prop “maxlength”. Expected Number, got String. found in 原因: 是maxlength属性使用错误 解决方法: :maxlength="300"加冒号就可以了
jQuery Mobile中的输入框
10-09 2669
在基于HTML5 的 jQuery Mobile 框架中，常用的输入框列表如下。 名称 Type 功能 文本输入框 text 传统输入框，实现文本输入 密码输入框 password 输入密码的输入框，相当于的功能 数字输入框 number 能够输入数字的输入框。与html4不同之处在于，可以通过微调按钮的样式进行上下调整 电子邮
jquery mobile获取表单input数据的微妙处
积累
04-19 5322
input name="password-login" id="password-login" placeholder="password" type="text"> 如上的ＨＴＭＬ，使用 val = $("#id").attr("value");是会出错的，说是没找到ｏｂｊｅｃｔ，要改成如下： input name="password-login" id="password-login"
jquery之input输入框限制输入字符数及汉字数
@~莲坂果贸的博客
04-11 2699
直接上代码 JSP页面示例： <input type="text" class="textBox length-middle" id="namerid" name="name" oninput="checkField(this.value,20,'namerid')" /> <%--20为限制的字符数，相当于2倍的汉字数--%> Jquery代码 ...
el-input类型为number，只能输入3位数字
最新发布
08-09
在使用 `el-input` 组件时，如果希望限制用户只能输入最多三位数字，可以通过结合 `type="number"` 和 `maxlength` 属性来实现基本的输入限制。此外，为了增强控制，还可以通过 `oninput` 事件进一步确保输入值的格式和范围符合要求。 以下是一个完整的实现示例： ```vue <template> <el-input type="number" v-model="inputValue" :oninput="handleInput" maxlength="3" placeholder="请输入最多三位数字" ></el-input> </template> <script> export default { data() { return { inputValue: '' }; }, methods: { handleInput(event) { // 限制输入只能为数字，并且最多三位 let value = event.target.value; if (!/^\d{0,3}$/.test(value)) { this.inputValue = value.slice(0, 3).replace(/[^0-9]/g, ''); } } } }; </script> ``` ### 说明： 1. `type="number"` 限制输入框只能接受数字输入，但此属性本身不限制输入的位数。 2. `maxlength="3"` 是 HTML 原生属性，用于限制输入的最大字符数。不过，`maxlength` 对 `type="number"` 的支持在某些浏览器中可能不完全有效，因此需要额外的 JavaScript 逻辑来确保限制。 3. `oninput` 事件监听器用于在用户输入时动态校验和修正输入值： - 正则表达式 `/^\d{0,3}$/` 确保输入值始终是 0 到 3 位数字。 - 如果输入值不符合要求，则通过 `.replace(/[^0-9]/g, '')` 移除非数字字符，并通过 `.slice(0, 3)` 限制最多三位数字。 通过这种方式，可以确保用户在 `el-input` 中只能输入最多三位数字，并且输入内容始终符合预期。 --- ###
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值