web-dev-qa-db-ja.com

FirefoxのHTML5入力タイプ「数値」

社内で数人しか使用しないアプリを開発しているので、FirefoxまたはChromeのみを使用するように伝えて、HTML5を使用できるようにしています。

私は非常に単純な機能に取り組んでいました：

<style> 
input:invalid { background-color: red; }
div.box {
border-color:#000; 
border-width:thin; 
border-style:solid;
}
</style>     
<input type="number" name="id"> <small>(if the box becomes red, make sure you didn't put a space)</small>

Chromeでうまく機能します。赤くなり、他に何もコーディングしないと送信できません。

Firefox ...それほど多くはありません。それは私が「テキスト」タイプを持っているかのように機能します。

それは既知の問題ですか？回避策？

ありがとう

firefoxformshtml
15
Nathan H

まず、Firefox 4を使用していますか？ HTML5フォームは、バージョン4ではるかに優れたサポートを提供します。

このページには、HTML5フォームと現在のバグの詳細があります https://wiki.mozilla.org/User:Mounir.lamouri/HTML5_Forms

更新：ブラウザが使用するHTML5機能をサポートしていない場合は、 Modernizr を試してください。 Javascriptを使用してサポートを強化します。ドキュメントには 入力タイプに関する情報 があります。

7
andyuk

それは既知の問題ですか？

はい。不明なタイプはテキストとして扱われます。 （ドラフト仕様にのみ表示されるタイプは、多くのブラウザーで不明になる傾向があります）

回避策？

JavaScript

6
Quentin

input type="number"は、バージョン25（2013年11月）の時点ではまだFirefoxに実装されていません。

バグ344616は、Bugzilla @ Mozillaの関連チケットです： https://bugzilla.mozilla.org/show_bug.cgi?id=344616

2014年3月10日更新-朗報です！チケットはFirefox29で修正されたようです、 予定 2014年4月29日にリリースされます。

2014年4月30日更新-確認しました。試してみましたが、Firefox29はinput type="number"をサポートしています。

5
Jon Schneider

いいえブラウザはまだこれを取得していません。マイレージは異なる場合がありますが、すべてのブラウザで実行する必要のある作業は間違いなくあります。

OperaはUIを表示し、上下の矢印をクリックして数を増減できます。ただし、番号以外が入力されている場合でも、フォームを送信できます。アクセシビリティはまだ完全ではありませんが、少なくともキーボードの矢印を使用して数を増減することもできます。

Chromeにはまだ番号のUIがないため、ヘルプがないか、番号が予想されるという視覚的なヒントがありません。 Chromeにも実際のエラーメッセージはありません。入力境界線をわずかに赤にすると、デフォルトとして十分ではなく、完全にアクセスできなくなります。Chromeは基本的に、アクセシビリティに関してはすべてのブラウザの中で最悪の犯罪者です。たとえば、ARIAのサポートはありません。

：invalid pseudo-classを使用して、入力ウィジェット全体を赤にします。これはChromeのデフォルトのスタイルよりも明確な場合がありますが、それでもアクセス可能なソリューションではないことを認識してください。 ChromeはARIAをサポートしていないため、JavaScriptを介してテキストエラーメッセージを提供したとしても、目の不自由なユーザーやスクリーンリーダーを使用している他のユーザーには聞こえない可能性があります。まったく。

Firefoxはこのゲームに遅れているかもしれませんが、Mozillaには その機能の非常に厳しい出荷基準 があり、Chromeは結果について考えずに遊んでいます。

4
itpastorn

私はFirefoxを使用していますが、文字やスペースなどを入力する入力タイプ番号の開発で同じ問題が発生しました...とにかくこの例ではangular 2を使用していますが、JavaScriptとほぼ同じです。あらゆる場合にこのコードを使用してください：ここにhtmlがあります：

<input class="form-control form-control-sm" id="qte" type="number"  min="1" max="30" step="1" [(ngModel)]="numberVoucher"
     (keypress)="FilterInput($event)" />

これが関数FilterInputです：

FilterInput(event: any) {
        let numberEntered = false;
        if ((event.which >= 48 && event.which <= 57) || (event.which >= 37 && event.which <= 40)) { //input number entered or one of the 4 directtion up, down, left and right
            //console.log('input number entered :' + event.which + ' ' + event.keyCode + ' ' + event.charCode);
            numberEntered = true;
        }
        else {
            //input command entered of delete, backspace or one of the 4 directtion up, down, left and right
            if ((event.keyCode >= 37 && event.keyCode <= 40) || event.keyCode == 46 || event.which == 8) {
                //console.log('input command entered :' + event.which + ' ' + event.keyCode + ' ' + event.charCode);
            }
            else {
                //console.log('input not number entered :' + event.which + ' ' + event.keyCode + ' ' + event.charCode);
                event.preventDefault();
            }
        }
        // input is not impty
        if (this.validForm) {
            // a number was typed
            if (numberEntered) {
                let newNumber = parseInt(this.numberVoucher + '' + String.fromCharCode(event.which));
                console.log('new number : ' + newNumber);
                // checking the condition of max value
                if ((newNumber <= 30 && newNumber >= 1) || Number.isNaN(newNumber)) {
                    console.log('valid number : ' + newNumber);
                }
                else {
                    console.log('max value will not be valid');
                    event.preventDefault();
                }
            }
            // command of delete or backspace was types
            if (event.keyCode == 46 || event.which == 8) {
                if (this.numberVoucher >= 1 && this.numberVoucher <= 9) {
                    console.log('min value will not be valid');
                    this.numberVoucher = 1;
                    //event.preventDefault();
                    this.validForm = true;
                }
            }
        }
        // input is empty
        else {
            console.log('this.validForm = true');
            this.validForm = false;
        }
    };

この関数では、数字、方向、削除のキーを押すだけで入力する必要があったため、この関数は2倍ではなく正の整数専用です。

1
Abdelhalim FELLAGUE CHEBRA

Firefoxは4.0以降パターンをサポートしています

 <input name="hours" type="number" pattern="[-+]?[0-9]*[.,]?[0-9]+"/>

（ヘルプについては、 http://html5pattern.com/ を参照してください）

0
user671843