[英]Limit number of characters in input type number
Im trying to limit to X number the characters in a input (type of number).我试图将输入中的字符(数字类型)限制为 X 编号。 ive tried a lot of options and none seems to work.我尝试了很多选择,但似乎都不起作用。 I dont want to use the option tel as it needs the numeric keyboard on a mobile device (yes, with ., and all the symbols) I tried also the pattern solution but it only worked for iOS, didnt work in android (displayed the normal keyboard).我不想使用选项 tel,因为它需要移动设备上的数字键盘(是的,带有 . 和所有符号)我也尝试了模式解决方案,但它仅适用于 iOS,不适用于 android(显示正常键盘)。
The best way would be that if the user hits the limit dont let him type anymore, if he wants to highlight the text and re-type a different number he is allow to.最好的方法是,如果用户达到限制,不要再让他输入,如果他想突出显示文本并重新输入他允许的不同数字。 Just not let him type more than the specified number of characters.只是不要让他输入超过指定数量的字符。
So, any help is appreciated.因此,任何帮助表示赞赏。
Note: charCode
is non-standard and deprecated, whereas keyCode
is simply deprecated.注意: charCode
是非标准的并且不推荐使用,而keyCode
只是不推荐使用。
Check this code检查此代码
JavaScript JavaScript
<script>
function check(e,value)
{
//Check Charater
var unicode=e.charCode? e.charCode : e.keyCode;
if (value.indexOf(".") != -1)if( unicode == 46 )return false;
if (unicode!=8)if((unicode<48||unicode>57)&&unicode!=46)return false;
}
function checkLength()
{
var fieldLength = document.getElementById('txtF').value.length;
//Suppose u want 4 number of character
if(fieldLength <= 4){
return true;
}
else
{
var str = document.getElementById('txtF').value;
str = str.substring(0, str.length - 1);
document.getElementById('txtF').value = str;
}
}
and HTML input
with number
type below和下面带有number
类型的 HTML input
onInput //Is fired also if value change from the side arrows of field in Chrome browser
<input id="txtF" type="number" onKeyPress="return check(event,value)" onInput="checkLength()" />
Update -- Little bit generic code example更新——一点点通用代码示例
Change above function into this one把上面的函数改成这个
function checkLength(len,ele){
var fieldLength = ele.value.length;
if(fieldLength <= len){
return true;
}
else
{
var str = ele.value;
str = str.substring(0, str.length - 1);
ele.value = str;
}
}
In HTML use like this在 HTML 中像这样使用
<!-- length 4 -->
<input id="txtF" type="number" onKeyPress="return check(event,value)" onInput="checkLength(4,this)" />
<!-- length 5 -->
<input type="number" onKeyPress="return check(event,value)" onInput="checkLength(5,this)" />
<!-- length 2 -->
<input type="number" onKeyPress="return check(event,value)" onInput="checkLength(2,this)" />
另一种选择 - tel
输入类型遵守maxlength
和size
属性。
<input type="tel" size="2" maxlength="2" />
<input type="tel" size="10" maxlength="2" />
May be it will be useful.可能会有用。
Here is field to input Patient Age.这是输入患者年龄的字段。 It allows to input 3 numbers only.它只允许输入 3 个数字。
HTML HTML
<input autocomplete="off" class="form-control" id="Patient_Age" max="150" maxlength="3" name="PatientAge" placeholder="Age" size="3" type="number" value="0">
JS JS
<script>
$(function () {
$("#Patient_Age").keydown(function (e) {
// Allow: backspace, delete, tab, escape, enter
if ($(this).val().length <= 2 || $.inArray(e.keyCode, [46, 8, 9, 27, 13, 110]) !== -1 ||
// Allow: Ctrl+A
// (e.keyCode == 65 && e.ctrlKey === true) ||
// Allow: home, end, left, right
(e.keyCode >= 35 && e.keyCode <= 39)) {
// let it happen, don't do anything
return;
}
else {
event.preventDefault();
}
// Ensure that it is a number and stop the keypress
if ($(this).val().length <= 2 || (e.shiftKey || (e.keyCode < 48 || e.keyCode > 57)) && (e.keyCode < 96 || e.keyCode > 105)) {
e.preventDefault();
}
else {
event.preventDefault();
}
});
}); // end of $
</script>
The HTML5 number
type input has min
and max
attributes. HTML5 number
类型输入具有min
和max
属性。
If you wanted to limit the number of characters to 1 you could set a min of 0 and a max of 9.如果您想将字符数限制为 1,您可以设置最小值为 0,最大值为 9。
You can also set the step
attribute, which is 1 by default, but would come in use if you wanted the ability to select decimals or other rounded numbers.您还可以设置step
属性,默认情况下为 1,但如果您希望能够选择小数或其他四舍五入的数字,则可以使用该属性。
<input type="number" maxlength="1" max="9" min="1" size="1" />
please review this code请查看此代码
<script language="javascript" type="text/javascript">
function limitText(limitField, limitCount, limitNum) {
if (limitField.value.length > limitNum) {
limitField.value = limitField.value.substring(0, limitNum);
} else {
limitCount.value = limitNum - limitField.value.length;
}
}
</script>
<form name="myform">
<input name="limitedtextfield" type="text" onKeyDown="limitText(this.form.limitedtextfield,this.form.countdown,15);"
onKeyUp="limitText(this.form.limitedtextfield,this.form.countdown,15);" maxlength="15"><br>
<font size="1">(Maximum characters: 15)<br>
You have <input readonly type="text" name="countdown" size="3" value="15"> characters left.</font>
</form>
I think this requires the onkeyup event handler.我认为这需要 onkeyup 事件处理程序。
Use this handler to keep on entering numbers till 5 keyup's are encountered.使用此处理程序继续输入数字,直到遇到 5 个 keyup。 After this , don't let the the number to be entered by returning a 0, unless key pressed is backspace or delete .在此之后,不要让要输入的数字返回 0,除非按下的键是退格键或删除键。
You can try thiss jQuery code :你可以试试这个 jQuery 代码:
In HTML在 HTML 中
<input type="number" id="number" />
In JS在JS中
$(document).ready(function () {
var element = document.getElementById('number');
$("#number").keydown(function (event) {
// Allow only backspace and delete
if($(this).val().length <= 9 || event.keyCode == 46 || event.keyCode == 8 || event.keyCode == 9 )
{
if (event.keyCode == 46 || event.keyCode == 8 || event.keyCode == 9) {
// let it happen, don't do anything
} else {
// Ensure that it is a number and stop the keypress
if ((event.keyCode < 48 || event.keyCode > 57) && (event.keyCode < 96 || event.keyCode > 105)) {
event.preventDefault();
}
}
}else{
event.preventDefault();
}
});
});
I have not any idea wheather its working on IOS N Android but its work on all browser.我不知道它是否适用于 IOS N Android 但它适用于所有浏览器。
For Decimal values, lets say "25.2" code is as under.对于十进制值,假设“25.2”代码如下。
if(thisObj.value.indexOf(".") >=0)
{
if(fieldLength <= 4)
{
return true;
}
else
{
var str = thisObj.value;
str = str.substring(0, str.length - 1);
thisObj.value = str;
}
}
else
{
if(fieldLength <= 2)
{
return true;
}
else
{
var str = thisObj.value;
str = str.substring(0, str.length - 1);
thisObj.value = str;
}
}
你可以很容易地做到这一点,
<input type="text" pattern="\d*" maxlength="4">
Proper way 2020 for type number is to check on keydown validation and it should work like this: onkeypress="checkValidation(fieldValue);"
2020 年类型号的正确方法是检查 keydown 验证,它应该像这样工作: onkeypress="checkValidation(fieldValue);"
<-- on input in html and in js: <-- 在 html 和 js 中输入:
checkValidation(a) {
if (`${a}`.length < 8) {
return true;
} else {
return false;
}
}
像这样使用 maxlength 属性。
<input type="text" maxlength="5"/>
Dude why go for javascript?伙计,为什么要使用 javascript? Just try你试一试
<input type="text" maxlength="4" size="4">
maxlength will anyways define a maximum length for the input field. maxlength 无论如何都会定义输入字段的最大长度。
Hope this solved the problem :)希望这解决了问题:)
EDIT: Since you specifically want numbers, why dont you use the above and then run a jquery validation to check for numbers?编辑:既然你特别想要数字,为什么不使用上面的然后运行 jquery 验证来检查数字? That will also work..这也将工作..
EDIT: Okay, try编辑:好的,试试
<input type="number" name="pin" min="1000" max="9999">
您是否尝试过属性 maxlength ?
<input type="text" maxlength="5" name="user" >
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.