「maxlength」、「min」、「max」のいずれのHTML属性も、次のマークアップに関してiPhoneに望ましい効果をもたらさないようです。
<input type="number" maxlength="2" min="0" max="99"/>
入力した数字の桁数や値を制限する代わりに、iPhone 4で入力したとおりに数字が残ります。このマークアップは、テストした他のほとんどの携帯電話で機能します。
何が得られますか?
回避策はありますか?
ソリューションにとって重要な場合は、jQuery mobileを使用します。
ありがとう!
例
[〜#〜] js [〜#〜]
function limit(element)
{
var max_chars = 2;
if(element.value.length > max_chars) {
element.value = element.value.substr(0, max_chars);
}
}
[〜#〜] html [〜#〜]
<input type="number" onkeydown="limit(this);" onkeyup="limit(this);">
JQueryを使用している場合は、JavaScriptを少し整理できます。
[〜#〜] js [〜#〜]
var max_chars = 2;
$('#input').keydown( function(e){
if ($(this).val().length >= max_chars) {
$(this).val($(this).val().substr(0, max_chars));
}
});
$('#input').keyup( function(e){
if ($(this).val().length >= max_chars) {
$(this).val($(this).val().substr(0, max_chars));
}
});
[〜#〜] html [〜#〜]
<input type="number" id="input">
[〜#〜] mdn [〜#〜] によれば、maxlength
はnumber
sには使用されません。ちょうど試しましたか:
<input type="number" min="0" max="99" />
OR
<input type="range" min="0" max="99" />
このコードを使用できます:
<input type="number" maxlength="2" min="0" max="99"
onkeypress="limitKeypress(event,this.value,2)"/>
およびjsコード:
function limitKeypress(event, value, maxLength) {
if (value != undefined && value.toString().length >= maxLength) {
event.preventDefault();
}
}
これを確認してください、それは私のために動作します。
JavaScriptを使用して、ボックス内の文字数を確認し、多すぎる場合は削除します。 http://www.webcodingtech.com/javascript/limit-input-text.php
アンドリューがタイプを範囲に変更する必要があると言ったように、IEとFFおよびおそらく古いiPadブラウザーで問題が発生することに加えて、それはHTML 5からのものであり、 "。JSで範囲を試したこの人物を見てみましょう javascriptを使用して数値フィールドに入力する数値の範囲を指定してください
ここで、セレクターをキャッシュする、より最適化されたjQueryバージョン。また、入力タイプ番号でサポートされていないmaxlength属性も使用します。
// limits the input based on the maxlength attribute, this is by default no supported by input type number
$("input[type=number]").on('keydown keyup',function(){
var $that = $(this),
maxlength = $that.attr('maxlength')
if($.isNumeric(maxlength)){
$that.val($that.val().substr(0, maxlength));
};
});
JQueryの別のオプションですが、onkeypressイベント...;)
$("input[type=number]").on('keypress',function(e) {
var $that = $(this),
maxlength = $that.attr('maxlength')
if($.isNumeric(maxlength)){
if($that.val().length == maxlength) { e.preventDefault(); return; }
$that.val($that.val().substr(0, maxlength));
};
});
この質問は1年前のものですが、選択した答えは好みません。動作する方法は、入力された文字を表示してから削除することだからです。
対照的に、私はウィルのものに似ている別の方法を提案します、それはキャラクターが表示されるのを防ぐ方法でちょうど良いです。また、else if
ブロックを追加して、文字が数字であるかどうかを確認し、数字フィールドを検証するのに適した機能です。
[〜#〜] html [〜#〜]
<input type="number" onkeydown="limit(this);">
[〜#〜] js [〜#〜]
function limit(element)
{
var max_chars = 2;
if (arguments[1].char !== "\b" && arguments[1].key !== "Left" && arguments[1].key !== "Right") {
if (element.value.length >= max_chars) {
return false;
} else if (isNaN(arguments[1].char)) {
return false;
}
}
}
これは、キーを削除できるように最適化されたTripexの回答であり、入力時および貼り付け時に機能します。
$(document).on("keyup", "#your_element", function(e) {
var $that = $(this),
maxlength = $that.attr('maxlength');
if ($.isNumeric(maxlength)){
if($that.val().length === maxlength) {
e.preventDefault();
// If keyCode is not delete key
if (e.keyCode !== 64) {
return;
}
}
$that.val($that.val().substr(0, maxlength));
}
});