回答:
そして、max
挿入できる最大の数を指定する属性を追加できます
<input type="number" max="999" />
a max
とmin
値の両方を追加する場合は、許可される値の範囲を指定できます。
<input type="number" min="1" max="999" />
上記静止うない手動で指定された範囲の値の外側に入ることからユーザーを停止します。代わりに、次のスクリーンショットに示すように、フォームを送信すると、この範囲内の値を入力するように指示するポップアップが表示されます。
min
およびmax
属性を指定できます。これにより、特定の範囲内でのみ入力が許可されます。
<!-- equivalent to maxlength=4 -->
<input type="number" min="-9999" max="9999">
ただし、これはスピナーコントロールボタンに対してのみ機能します。ユーザーが許可されている数より大きい数値を入力できる場合もありますがmax
、フォームは送信されません。
Chrome 15から取得したスクリーンショット
あなたはできる HTML5の使用oninput
文字の数を制限するために、JavaScriptでイベントを:
myInput.oninput = function () {
if (this.value.length > 4) {
this.value = this.value.slice(0,4);
}
}
maxlength
.............
ユーザーにフルテキストキーボードではなくテンキーを表示したいモバイル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
関数は機能しません。
デモ -次のコードの完全版をご覧ください:http :
//jsfiddle.net/DRSDavidSoft/zb4ft1qq/1/
更新2:更新コードは次のとおりです:https : //jsfiddle.net/DRSDavidSoft/zb4ft1qq/2/
更新3: 小数点以上の入力を許可すると、数値が乱れることに注意してください。
それは非常に簡単です、あなたがシミュレートできるいくつかのjavascriptでmaxlength
、それをチェックしてください:
//maxlength="2"
<input type="number" onKeyDown="if(this.value.length==2) return false;" />
keydown
は、最大文字数でバックスペースを使用できないことです。問題keypress
は、最大文字数を超えてコピーして貼り付けることができることです。
または、最大値がたとえば99で最小値が0の場合、これを入力要素に追加できます(値は最大値などで書き換えられます)。
<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">
次に、(必要に応じて)入力が本当に数値かどうかを確認できます
onKeyUp="if(this.value>this.max)this.value=this.max;if(this.value<this.min)this.value=this.min;"
テキストとして指定できますが、番号のみに一致するpetternを追加します。
<input type="text" pattern="\d*" maxlength="2">
それは完璧に動作し、モバイル(iOS 8およびAndroidでテスト済み)でも数字キーボードが飛び出します。
pattern
検証のみのハイライトの原因となります。
//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」イベントを使用する場合、開発中(ユニットテスト)にユーザーの制限が発生することはありません。また、特定の制限の後にユーザーが入力できないようにする必要がある場合は、このコードを確認して1回試してください。
別のオプションは、maxlength属性を持つすべてのリスナーを追加し、それにスライス値を追加することです。ユーザーが入力に関連するすべてのイベント内で関数を使用したくないと仮定します。これがコードスニペットです。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>
最大許容値を1000にしたいとしましょう-入力またはスピナーで。
次を使用してスピナーの値を制限します。
type="number" min="0" max="1000"
そして、javascript:
onkeyup="if(parseInt(this.value)>1000){ this.value =1000; return false; }
"
<input type="number" min="0" max="1000" onkeyup="if(parseInt(this.value)>1000){ this.value =1000; return false; }">
他の人が述べたように、min / maxはmaxlengthと同じではありません。意図した最大文字列長よりも長い浮動小数点数が入力される可能性があるためです。maxlength属性を真にエミュレートするには、次のようなことを簡単に実行できます(これはmaxlength = "16"と同等です)。
<input type="number" oninput="if(value.length>16)value=value.slice(0,16)">
maxlength
は数値入力ではサポートされていません。私の例でvalue.slice(0,16)
は、入力値が16文字を超えない限り、起動しません。
type="number"
がそれを処理します:)。
Maycow Mouraの答えは良いスタートでした。ただし、彼の解決策は、2桁目を入力すると、フィールドのすべての編集が停止することを意味します。したがって、値を変更したり、文字を削除したりすることはできません。
次のコードは2で停止しますが、編集を続行できます。
//MaxLength 2
onKeyDown="if(this.value.length==2) this.value = this.value.slice(0, - 1);"
以前にこの問題があり、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
と同じように type="number"
、プロパティのmax
代わりにmaxlength
、可能な最大数であるプロパティを指定します。したがって、4桁の場合max
は9999
、5桁にする必要があります99999
。
また、それが正の数であることを確認したい場合は、設定することができます min="0"
ます。
ああ。それは誰かがそれを実装することの半分をあきらめ、誰も気づかないと思ったようなものです。
何らかの理由で、上記の回答ではmin
and max
属性を使用していません。このjQueryはそれを完成させます。
$('input[type="number"]').on('input change keyup paste', function () {
if (this.min) this.value = Math.max(parseInt(this.min), parseInt(this.value) || 0);
if (this.max) this.value = Math.min(parseInt(this.max), parseInt(this.value) || 0);
});
これらの「jQuery-is-the-devil」タイプのいずれかである場合、jQueryなしの「oninput」という名前の関数としても機能します。
私が見つけたように、あなたはモバイルブラウザを含む完全なソリューションのためにonkeydown
、onkeypress
またはonkeyup
イベントを使用することはできません。ちなみに、onkeypress
廃止予定であり、Androidのchrome / operaには存在しません(参照:UIイベントW3Cワーキングドラフト、2016年8月4日)参照)。
oninput
イベントのみを使用して解決策を見つけました。必要に応じて、負/正の符号または小数点と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
間違った提出を防ぐことを勧めます。
私はすでに答えがあることを知っていますが、入力を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();
これは誰かを助けるかもしれません。
少しのJavaScriptで、すべての日時ローカル入力を検索し、ユーザーが入力しようとしている年が将来100年を超えているかどうかを検索できます。
$('input[type=datetime-local]').each(function( index ) {
$(this).change(function() {
var today = new Date();
var date = new Date(this.value);
var yearFuture = new Date();
yearFuture.setFullYear(yearFuture.getFullYear()+100);
if(date.getFullYear() > yearFuture.getFullYear()) {
this.value = today.getFullYear() + this.value.slice(4);
}
})
});