maxlengthはChromeのinput type = "number"では無視されます
maxlength属性は<input type="number">では機能しません。これはChromeでのみ起こります。
<input type="number" class="test_css" maxlength="4" id="flight_number" name="number"/>
から<input> に関するMDNのドキュメント
type属性の値が
text、search、password、tel、またはurlのいずれかである場合、この属性はユーザーが使用できる最大文字数（Unicodeコードポイント）を指定します。入ることができます。他のコントロールタイプでは無視されます。
そのため、maxlengthは<input type="number">では設計上無視されます。
必要に応じて、回答で提案されているinonのようにminおよびmax属性を使用できます（注：これは実際の文字長ではなく、制限された範囲のみを定義します）。ただし、-9999から9999まではすべて0から4桁の数字をカバーしますが、通常のテキスト入力を使用して、新しい pattern を使用してフィールドの検証を強制できます。属性：
<input type="text" pattern="\d*" maxlength="4">
最大長は<input type="number"では動作しません私が知っている最善の方法は最大長を制限するためにoninputイベントを使うことです。下記のコードをご覧ください。
<input name="somename"
oninput="javascript: if (this.value.length > this.maxLength) this.value = this.value.slice(0, this.maxLength);"
type = "number"
maxlength = "6"
/>
minおよびmax属性を使用できます。
次のコードも同じです。
<input type="number" min="-999" max="9999"/>
2つの方法があります
まず、type="tel"を使用します。モバイルではtype="number"のように機能し、maxlengthを受け入れます。
<input type="tel" />
第二に：JavaScriptを少し使用します。
<!-- maxlength="2" -->
<input type="tel" onKeyDown="if(this.value.length==2 && event.keyCode!=8) return false;" />
多くの人がonKeyDown()イベントを投稿しました。これは動作していない、つまり制限に達すると削除できません。そのため、onKeyDown()の代わりにonKeyPress()を使用すれば、それは完全にうまく機能します。
以下は作業コードです。
User will not be allowed to enter more than 4 digits
<br>
<input type="number" pattern="/^-?\d+\.?\d*$/" onKeyPress="if(this.value.length==4) return false;" />私はかつて同じ問題に遭遇し、私のニーズに関してこの解決策を見つけました。それは助けになるかもしれません。
<input type="number" placeholder="Enter 4 Digits" max="9999" min="0"
onKeyDown="if(this.value.length==4 && event.keyCode>47 && event.keyCode < 58)return false;"
/>
ハッピーコーディング:)
入力タイプをテキストに変更し、 "oninput"イベントを使用してfunctionを呼び出します。
<input type="text" oninput="numberOnly(this.id);" class="test_css" maxlength="4" id="flight_number" name="number"/>
Javascript Regexを使用してユーザー入力をフィルタリングし、それを数字のみに制限します。
function numberOnly(id) {
// Get element by id which passed as parameter within HTML element event
var element = document.getElementById(id);
// Use numbers only pattern, from 0 to 9
var regex = /[^0-9]/gi;
// This removes any other character but numbers as entered by user
element.value = element.value.replace(regex, "");
}
これがjQueryを使った私の解決策です...あなたの入力タイプにmaxlengthを追加する必要があります。
$('body').on('keypress', 'input[type=number][maxlength]', function(event){
var key = event.keyCode || event.charCode;
var charcodestring = String.fromCharCode(event.which);
var txtVal = $(this).val();
var maxlength = $(this).attr('maxlength');
var regex = new RegExp('^[0-9]+$');
// 8 = backspace 46 = Del 13 = Enter 39 = Left 37 = right Tab = 9
if( key == 8 || key == 46 || key == 13 || key == 37 || key == 39 || key == 9 ){
return true;
}
// maxlength allready reached
if(txtVal.length==maxlength){
event.preventDefault();
return false;
}
// pressed key have to be a number
if( !regex.test(charcodestring) ){
event.preventDefault();
return false;
}
return true;
});
コピー＆ペーストを処理します。
$('body').on('paste', 'input[type=number][maxlength]', function(event) {
//catch copy and paste
var ref = $(this);
var regex = new RegExp('^[0-9]+$');
var maxlength = ref.attr('maxlength');
var clipboardData = event.originalEvent.clipboardData.getData('text');
var txtVal = ref.val();//current value
var filteredString = '';
var combined_input = txtVal + clipboardData;//dont forget old data
for (var i = 0; i < combined_input.length; i++) {
if( filteredString.length < maxlength ){
if( regex.test(combined_input[i]) ){
filteredString += combined_input[i];
}
}
}
setTimeout(function(){
ref.val('').val(filteredString)
},100);
});
誰かに役立つことを願っています。
<input type="number" oninput="this.value = this.value.replace(/[^0-9.]/g, ''); this.value = this.value.replace(/(\..*)\./g, '$1');" onKeyDown="if(this.value.length==10 && event.keyCode!=8) return false;">
デモ - JSFIDDLE
長さ制限のある数値入力でもこれを試すことができます。
<input type="tel" maxlength="4" />
私の経験では、なぜmaxlengthが無視されるのかという質問をしているほとんどの問題は、ユーザーが "許可された"文字数以上を入力することを許されているからです。
他のコメントが述べているように、type="number"入力はmaxlength属性を持たず、代わりにminとmax属性を持ちます。
フォームが送信される前にユーザーがこれを認識できるようにしながら、挿入できる文字数をフィールドで制限するには（ブラウザはvalue> maxを指定する必要があります）、（少なくとも今のところは）フィールドのリスナー。
これが私が過去に使った解決策です： http://codepen.io/wuori/pen/LNyYBM
私はすでに答えがあることを知っていますが、あなたの入力がmaxlength属性と全く同じように振る舞うようにしたい、またはできる限り近いものにしたいなら、次のコードを使用してください。
(function($) {
methods = {
/*
* addMax will take the applied element and add a javascript behavior
* that will set the max length
*/
addMax: function() {
// set variables
var
maxlAttr = $(this).attr("maxlength"),
maxAttR = $(this).attr("max"),
x = 0,
max = "";
// If the element has maxlength apply the code.
if (typeof maxlAttr !== typeof undefined && maxlAttr !== false) {
// create a max equivelant
if (typeof maxlAttr !== typeof undefined && maxlAttr !== false){
while (x < maxlAttr) {
max += "9";
x++;
}
maxAttR = max;
}
// Permissible Keys that can be used while the input has reached maxlength
var keys = [
8, // backspace
9, // tab
13, // enter
46, // delete
37, 39, 38, 40 // arrow keys<^>v
]
// Apply changes to element
$(this)
.attr("max", maxAttR) //add existing max or new max
.keydown(function(event) {
// restrict key press on length reached unless key being used is in keys array or there is highlighted text
if ($(this).val().length == maxlAttr && $.inArray(event.which, keys) == -1 && methods.isTextSelected() == false) return false;
});;
}
},
/*
* isTextSelected returns true if there is a selection on the page.
* This is so that if the user selects text and then presses a number
* it will behave as normal by replacing the selection with the value
* of the key pressed.
*/
isTextSelected: function() {
// set text variable
text = "";
if (window.getSelection) {
text = window.getSelection().toString();
} else if (document.selection && document.selection.type != "Control") {
text = document.selection.createRange().text;
}
return (text.length > 0);
}
};
$.maxlengthNumber = function(){
// Get all number inputs that have maxlength
methods.addMax.call($("input[type=number]"));
}
})($)
// Apply it:
$.maxlengthNumber();
私が最近試したばかりの絶対的な解決策は、次のとおりです。
<input class="class-name" placeholder="1234567" name="elementname" type="text" maxlength="4" onkeypress="return (event.charCode == 8 || event.charCode == 0 || event.charCode == 13) ? null : event.charCode >= 48 && event.charCode <= 57" />
私はこれを早くてわかりやすくします！
type='number'のmaxlengthの代わりに（maxlengthは、text型の文字列の最大文字数を定義するためのものです）、min=''およびmax=''を使用してください。
乾杯
Chrome（厳密にはBlink） は、<input type="number">に対してmaxlength を実装しません。
HTML 5仕様 では、maxlengthはtext、url、e-mail、search、tel、およびpasswordの各タイプにのみ適用されるとしています。