HTML5の "number"要素で可能な入力を制限するにはどうすればいいですか？
<input type="number">要素の場合、maxlengthは機能しません。そのnumber要素のmaxlengthを制限するにはどうすればいいですか？
そして、あなたが挿入する可能性のある最大数を指定するmax属性を追加することができます。
<input type="number" max="999" />
maxとminの両方の値を追加する場合は、許容値の範囲を指定できます。
<input type="number" min="1" max="999" />
上記はまだ not ユーザーが手動で指定された範囲外の値を入力することをやめます。代わりに、このスクリーンショットに示すようにフォームを送信すると、この範囲内の値を入力するように指示するポップアップが表示されます。
特定の範囲内でのみ入力を許可するminおよびmax属性を指定できます。
<!-- equivalent to maxlength=4 -->
<input type="number" min="-9999" max="9999">
ただし、これはスピナーコントロールボタンに対してのみ機能します。ユーザーは、許可されているmaxよりも大きい数値を入力できる場合がありますが、フォームは送信されません。
Chrome 15からのスクリーンショット
can JavaScriptでHTML5 oninputイベントを使用して、文字数を制限します。
myInput.oninput = function () {
if (this.value.length > 4) {
this.value = this.value.slice(0,4);
}
}
あなたが Mobile Web あなたがあなたのユーザーにフルテキストキーボードよりもむしろテンキーを見ることを望む解決策を探しているなら。 type = "tel"を使用してください。それはあなたが余分なjavascriptを作成することからあなたを救うmaxlengthで働きます。
最大値と最小値では、ユーザーは最大値と最小値を超える数を入力できますが、これは最適ではありません。
このようにこれらすべてを組み合わせることができます。
<input name="myinput_drs"
oninput="maxLengthCheck(this)"
type = "number"
maxlength = "3"
min = "1"
max = "999" />
<script>
// This is an old version, for a more recent version look at
// https://jsfiddle.net/DRSDavidSoft/zb4ft1qq/2/
function maxLengthCheck(object)
{
if (object.value.length > object.maxLength)
object.value = object.value.slice(0, object.maxLength)
}
</script>
更新： object.lengthは数値入力用の空の文字列になるため、長さは0になるため、数字以外の文字を入力しないようにすることもできます。そのためmaxLengthCheck関数は機能しません。
溶液：
例については this または this を参照してください。
デモ - ここでコードのフルバージョンを参照してください。
http://jsfiddle.net/DRSDavidSoft/zb4ft1qq/1/
更新2： これがアップデートコードです： https://jsfiddle.net/DRSDavidSoft/zb4ft1qq/2/
更新3： 小数点を超える入力を許可すると、数値が乱れる可能性があることに注意してください。
それは非常に簡単です、あなたがmaxlengthをシミュレートすることができる若干のJavaScriptで、それをチェックしてください：
//maxlength="2"
<input type="number" onKeyDown="if(this.value.length==2) return false;" />
あるいは、あなたの最大値が例えば99と最小の0であるなら、あなたはこれをinput要素に加えることができます（あなたの値はあなたの最大値などで書き直されるでしょう）
<input type="number" min="0" max="99"
onKeyUp="if(this.value>99){this.value='99';}else if(this.value<0){this.value='0';}"
id="yourid">
それから（あなたが望むなら）、あなたは入力が本当に数であるかどうかチェックすることができます
あなたはそれをテキストとして指定することができますが、数字だけにマッチするpetternを追加します：
<input type="text" pattern="\d*" maxlength="2">
それは完璧に動作し、また（iOS 8とAndroidでテストされた）モバイルでも数字キーボードを飛び出します。
//For Angular I have attached following snippet.<div ng-app="">
<form>
Enter number: <input type="number" ng-model="number" onKeyPress="if(this.value.length==7) return false;" min="0">
</form>
<h1>You entered: {{number}}</h1>
</div>あなたが "onkeypress"イベントを使用するならば、あなたはそれを開発中にユーザーの制限を受けることはないでしょう（単体テスト）。ユーザーが特定の制限を超えて入力できないという要件がある場合は、このコードを確認してもう一度試してください。
他の人が述べているように、min/maxはmaxlengthと同じではありません。人々があなたが意図した最大の文字列の長さよりも大きいfloatを入力することができるからです。本当にmaxlength属性をエミュレートするために、あなたはピンチでこれのような何かをすることができます（これはmaxlength = "16"と同等です）：
<input type="number" oninput="if(value.length>16)value=value.slice(0,16)">
最大長は<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"
/>
Maycow Mouraの答えは良いスタートだった。しかし、彼の解決策は、2桁目を入力するとフィールドの編集がすべて停止することを意味します。そのため、値を変更したり文字を削除したりすることはできません。
次のコードは2で停止しますが、編集を続行できます。
//MaxLength 2
onKeyDown="if(this.value.length==2) this.value = this.value.slice(0, - 1);"
もう1つの選択肢は、maxlength属性を持つものにリスナーを追加し、それにslice値を追加することです。ユーザーが入力に関連するすべてのイベント内で関数を使用したくないと仮定します。これがコードスニペットです。 CSSとHTMLのコードは無視してください。JavaScriptが重要です。
// Reusable Function to Enforce MaxLength
function enforce_maxlength(event) {
var t = event.target;
if (t.hasAttribute('maxlength')) {
t.value = t.value.slice(0, t.getAttribute('maxlength'));
}
}
// Global Listener for anything with an maxlength attribute.
// I put the listener on the body, put it on whatever.
document.body.addEventListener('input', enforce_maxlength);label { margin: 10px; font-size: 16px; display: block }
input { margin: 0 10px 10px; padding: 5px; font-size: 24px; width: 100px }
span { margin: 0 10px 10px; display: block; font-size: 12px; color: #666 }<label for="test_input">Text Input</label>
<input id="test_input" type="text" maxlength="5"/>
<span>set to 5 maxlength</span>
<br>
<label for="test_input">Number Input</label>
<input id="test_input" type="number" min="0" max="99" maxlength="2"/>
<span>set to 2 maxlength, min 0 and max 99</span>私は以前この問題を抱えていました、そして私はhtml5ナンバータイプとjQueryの組み合わせを使用してそれを解決しました。
<input maxlength="2" min="0" max="59" name="minutes" value="0" type="number"/>
スクリプト：
$("input[name='minutes']").on('keyup keypress blur change', function(e) {
//return false if not 0-9
if (e.which != 8 && e.which != 0 && (e.which < 48 || e.which > 57)) {
return false;
}else{
//limit length but allow backspace so that you can still delete the numbers.
if( $(this).val().length >= parseInt($(this).attr('maxlength')) && (e.which != 8 && e.which != 0)){
return false;
}
}
});
出来事がやややり過ぎかどうかはわかりませんが、問題は解決しました。 JSfiddle
長さ制限のある数値入力でもこれを試すことができます。
<input type="tel" maxlength="3" />
数値入力にmaxlengthを設定する簡単な方法は、次のとおりです。
<input type="number" onkeypress="return this.value.length < 4;" oninput="if(this.value.length>=4) { this.value = this.value.slice(0,4); }" />
type="number"と同様に、可能な最大数であるmaxプロパティの代わりにmaxlengthを指定します。 4桁の場合、maxは9999、5桁99999のようになります。
また、正数であることを確認したい場合は、min="0"を設定して正数を確保することもできます。
HTML入力
<input class="minutesInput" type="number" min="10" max="120" value="" />
jQuery
$(".minutesInput").on('keyup keypress blur change', function(e) {
if($(this).val() > 120){
$(this).val('120');
return false;
}
});
私が見つけたように、あなたはモバイルブラウザを含む完全な解決策のためにonkeydown、onkeypressまたはonkeyupイベントのどれも使うことができません。ちなみにonkeypressは非推奨であり、Android用の chrome/opera にはもう存在しません（ UIイベントW3C Working Draft、2016年8月4日 を参照）。
私はoninputイベントだけを使った解決策を考え出しました。必要に応じて、負符号/正符号、10進数および1000個の区切り記号など、追加の番号チェックを行う必要があるかもしれませんが、最初は以下で十分なはずです。
function checkMaxLength(event) {
// Prepare to restore the previous value.
if (this.oldValue === undefined) {
this.oldValue = this.defaultValue;
}
if (this.value.length > this.maxLength) {
// Set back to the previous value.
this.value = oldVal;
}
else {
// Store the previous value.
this.oldValue = this.value;
// Make additional checks for +/- or ./, etc.
// Also consider to combine 'maxlength'
// with 'min' and 'max' to prevent wrong submits.
}
}また、maxlengthをminおよびmaxと組み合わせて、上記のように誤った送信を何度も防ぐことをお勧めします。
うーん。それは誰かがそれを実行することによって途中であきらめて、だれも気付かないだろうと思ったようなものです。
何らかの理由で、上記の答えはminとmax属性を使いません。このjQueryはそれを完成させます。
$('input[type="number"]').on('input change keyup paste', function () {
if (this.min) this.value = Math.max(parseInt(this.min), parseInt(this.value));
if (this.max) this.value = Math.min(parseInt(this.max), parseInt(this.value));
});
あなたのものが "jQuery-is-the-devil"タイプのものであれば、それはおそらくjQueryを使わないで "oninput"という名前の関数としても働くでしょう。
私はすでに答えがあることを知っていますが、あなたの入力が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 type="number" onchange="this.value=Math.max(Math.min(this.value, 100), -100);" />
何も入力したくない場合
<input type="number" onchange="this.value=this.value ? Math.max(Math.min(this.value,100),-100) : null" />
単にこれを書く...
<input type="text" onkeypress="return event.target.value.length < 13" placeholder="Enter Identity card number" class="form-control">
私のように世界的な制限を探している人のために：
$(document).on('keypress','input[type="number"][maxlength]', function(){
return this.value.length < +this.attributes.maxlength.value;
});
これは文書のすべてのキー入力をキャッチし、入力が「数値」入力であり、maxlength属性を持つ場合はそれをフィルタリングします。次に、長さが最大長に達していないときに押されたキーを許可します。動的に追加された入力やモーダルなどでも動作します。
より関連性のある使用する属性はminとmaxです。