maxlength属性が で機能していませ<input type="number">ん。これは Chrome でのみ発生します。
<input type="number" class="test_css" maxlength="4" id="flight_number" name="number"/>
質問する
606212 次
30 に答える
414
type属性の値が、、、、、、またはの場合、この属性は
text、ユーザーが入力できる最大文字数 (Unicode コード ポイント) を指定します。他のコントロール タイプの場合は無視されます。searchpasswordtelurl
したがって、設計maxlength上無視さ<input type="number">れます。
必要に応じて、彼/彼女の回答で提案されているようにmin、max属性を使用できます(注: これは、値の実際の文字長ではなく、制約された範囲のみを定義しますが、-9999 から 9999 はすべての 0-4 をカバーしますpatternまたは、通常のテキスト入力を使用して、新しい属性を使用してフィールドに検証を適用できます。
<input type="text" pattern="\d*" maxlength="4">
于 2013-08-29T12:23:16.590 に答える
328
最大長は、イベントを使用して最大長を制限する<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"
/>
于 2016-01-06T19:23:52.847 に答える
50
2 つの方法があります。
最初: を使用すると、モバイルのtype="tel"ようtype="number"に動作し、maxlength を受け入れます。
<input type="tel" />
2 番目: JavaScript を少し使用します。
<!-- maxlength="2" -->
<input type="tel" onKeyDown="if(this.value.length==2 && event.keyCode!=8) return false;" />
于 2014-05-09T02:26:30.853 に答える
37
minおよびmax属性を使用できます。
次のコードは同じことを行います。
<input type="number" min="-999" max="9999"/>于 2013-08-29T12:42:41.973 に答える
8
長さ制限のある数値入力に対してもこれを試すことができます
<input type="tel" maxlength="4" />
于 2014-11-10T07:37:47.530 に答える
6
ここにjQueryを使用した私のソリューションがあります...入力にmaxlengthを追加する必要があります type=number
$('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);
});
それが誰かに役立つことを願っています。
于 2016-08-22T11:09:36.597 に答える
4
私の経験では、無視される理由を尋ねるほとんどの問題はmaxlength、ユーザーが「許可された」文字数を超えて入力できるためです。
他のコメントが述べているように、type="number"入力にはmaxlength属性がなく、代わりにminandmax属性があります。
フォームが送信される前にユーザーがこれを認識できるようにしながら、フィールドに挿入できる文字数を制限するには (ブラウザーは値 > 最大を識別する必要があります)、(少なくとも今のところ) を追加する必要があります。フィールドへのリスナー。
過去に使用したソリューションは次のとおりです。http://codepen.io/wuori/pen/LNyYBM
于 2016-03-22T15:59:19.123 に答える
3
すでに答えがあることは知っていますが、入力を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();
于 2015-03-19T20:02:14.520 に答える
3
Chrome (技術的には、Blink)は maxlength for を実装しません<input type="number">。
HTML5 仕様によると、maxlength は text、url、e-mail、search、tel、および password のタイプにのみ適用されます。
于 2015-08-26T06:35:53.690 に答える
2
以下のコードにより、ユーザーは次のことができるようになります。
- 0 ～ 999 の範囲の数字のみを入力してください。
- これはまた、ユーザーが 3 文字を超えて入力しないように制限します。
- ユーザーが 3 文字以上入力すると、テキスト ボックスがクリアされます。
<input type="number" name="test_name" min="0" max="999" oninput="validity.valid||(value='');">
于 2021-09-16T10:47:20.457 に答える