web-dev-qa-db-ja.com

iPhoneのHTML5番号入力フィールドに入力できる文字数を制限する方法

「maxlength」、「min」、「max」のいずれのHTML属性も、次のマークアップに関してiPhoneに望ましい効果をもたらさないようです。

 <input type="number" maxlength="2" min="0" max="99"/>

入力した数字の桁数や値を制限する代わりに、iPhone 4で入力したとおりに数字が残ります。このマークアップは、テストした他のほとんどの携帯電話で機能します。

何が得られますか？

回避策はありますか？

ソリューションにとって重要な場合は、jQuery mobileを使用します。

ありがとう！

iphonehtmlhtml5jquery-mobileinput
20
Lennart Rolland

例

[〜＃〜] 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">
32
Will Maginn

[〜＃〜] mdn [〜＃〜] によれば、maxlengthはnumbersには使用されません。ちょうど試しましたか：

<input type="number" min="0" max="99" />

OR

<input type="range" min="0" max="99" />
3
Andrew Briggs

このコードを使用できます：

<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();
    }
}
2
Behnam Mohammadi

これを確認してください、それは私のために動作します。

HTML5に最小長の検証属性はありますか？

2
user3035081

JavaScriptを使用して、ボックス内の文字数を確認し、多すぎる場合は削除します。 http://www.webcodingtech.com/javascript/limit-input-text.php

1
ToshNeox

アンドリューがタイプを範囲に変更する必要があると言ったように、IEとFFおよびおそらく古いiPadブラウザーで問題が発生することに加えて、それはHTML 5からのものであり、 "。JSで範囲を試したこの人物を見てみましょう javascriptを使用して数値フィールドに入力する数値の範囲を指定してください

1
jcho360

ここで、セレクターをキャッシュする、より最適化された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));
    };
});
1
Tom Franssen

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
Tripex

この質問は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;
        }
    }
}
0
Reza

これは、キーを削除できるように最適化された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));
    }
});
0
Daniel Avellaneda