タイプ「番号」のhtml入力で、フィールドに文字「e」を入力できるのはなぜですか。


216

次のhtml5入力要素があります。

<input type="number">

この入力で文字「e」を入力フィールドに入力できるのはなぜですか?他のアルファベット文字は入力できません(期待どおり)

Chromeを使用するv。44.0.2403.107

私の意味を確認するには:http : //www.w3schools.com/html/tryit.asp?filename=tryhtml_input_number


3
また.、一部のブラウザーでは+、-、および複数回入力することもできます。
nu everest

回答:


217

それは仕様がそれが機能するはずであると正確に言っているからです。数値入力では、負の記号やor 文字(指数はorの後の数値)を含む浮動小数点数を受け入れることができます。eEeE

浮動小数点数は、次の部分で構成され、正確に次の順序で表示されます。

  1. 必要に応じて、最初の文字は " -"文字でもかまいません。
  2. 0—9」の範囲の1つ以上の文字。
  3. オプションで、以下のパーツを正確に次の順序で:
    1. " ."文字
    2. 0—9」の範囲の1つ以上の文字
  4. オプションで、以下のパーツを正確に次の順序で:
    1. " e"文字または " E"文字
    2. オプションで、 " -"文字または " +"文字
    3. 0—9」の範囲の1つ以上の文字。

2
ああ、ありがとう。私は間違ったスペック
Gnarlywhale、2015

4
私はまだこれに困惑しています。まず第一に、私は数学者ではないので、数値の文脈で「e」は何を表していますか?第二に、数字があり、文字が許可されているにもかかわらず、 "e"を入力するとすぐにinput.valueが空の文字列になる理由がわかりません...
Simon

9
@Simon、を使用するeと、他の方法では入力するのが面倒な大量の数値を圧縮するのに役立ちます。ささいな例として2e2 = 2*10^2 = 200
Gnarlywhale 16/07/21

3
@Simon 「私がeを書くとすぐに」ええと、はい、「4e」は数値ではありませんが、たとえば「4e + 0」は有効な数値(4)です。部分的なユーザー入力を処理する「ライブ」クライアントサイドJavaScriptコードがある場合、ユーザーが入力の編集を完了して完全な値を提供する時間を与え、編集の途中で干渉しないようにする必要があります。「4e + 0」入力から「未定義」がある場合は、「to number」パーサーを修正してください。質問の例はうまく機能し、エラーとして「4e + 1」を報告し、「4e + 0」は「4e + 0」として正しく返されます(つまり、1と5の間の数)。
Ped7g 2017年

4
@Anthonyいいえ、e指数を表します。
スコットマーカス

62

以下のように簡単にできます

<input type="number"  onkeydown="javascript: return event.keyCode == 69 ? false : true" />

更新された回答

@ 88 MPGが示唆するように、さらにシンプルにすることができます

<input type="number" onkeydown="return event.keyCode !== 69" />


17
return event.keyCode !== 69不要な3項演算子を回避するため、使用することをお勧めします。インライン化もお勧めしません。
アダムFratino

5
これはコピー貼り付けeEフィールドでの使用を妨げるものではありません
molamk

18

HTML入力の数値タイプでは、「e」が数値記号である指数を表すため、「e / E」を使用できます。

例200000は2e5と書くこともできます。これが質問への感謝に役立つことを願っています。          


12

数字のみで構成される数値の使用を強制する最良の方法

<input type="number" onkeydown="javascript: return event.keyCode === 8 ||
event.keyCode === 46 ? true : !isNaN(Number(event.key))" />

これにより、「e」、「-」、「+」、「。」が回避されます。...数字以外のすべての文字!

数字キーのみを許可するには:

isNaN(数値(イベント。キー))

"Backspace"(keyCode:8)と "Delete"(keyCode:46)を受け入れます...


11
<input type="number" onkeydown="return FilterInput(event)" onpaste="handlePaste(event)"  >

function FilterInput(event) {
    var keyCode = ('which' in event) ? event.which : event.keyCode;

    isNotWanted = (keyCode == 69 || keyCode == 101);
    return !isNotWanted;
};
function handlePaste (e) {
    var clipboardData, pastedData;

    // Get pasted data via clipboard API
    clipboardData = e.clipboardData || window.clipboardData;
    pastedData = clipboardData.getData('Text').toUpperCase();

    if(pastedData.indexOf('E')>-1) {
        //alert('found an E');
        e.stopPropagation();
        e.preventDefault();
    }
};

2
これにより、コピーアンドペースト機能で「E」文字が挿入されなくなるという自信はありますか?
StephenKelzer

1
チェックしたところ、正解です。コピーおよび貼り付けた入力では機能しません。
Gnarlywhale

あなたは正しい@StephenKelzerです。それを処理するコードを追加しました。
TruthSeeker 2016


3

角度を使用して、e、+、-、Eの入力を制限することができます

 <input type="number"  (keypress)="numericOnly($event)"/>


  numericOnly(event): boolean { // restrict e,+,-,E characters in  input type number
    debugger
    const charCode = (event.which) ? event.which : event.keyCode;
    if (charCode == 101 || charCode == 69 || charCode == 45 || charCode == 43) {
      return false;
    }
    return true;

  }

2
これにより、ユーザーはその文字を入力できなくなりますか?
Amy

1
私が角度で同じ解決策を探していたヘルプに感謝しますが、今私はそれを行う方法を考えています、私はディレクティブを作成してタスクを完了します
Amy

ベストプラクティスであるディレクティブを作成できます。同様に、コンポーネントの.tsファイルで直接行うこともできます!
rinku Choudhary

0

角度; IDE keyCode非推奨の警告あり

機能的にはrinkuの回答と同じですが、IDE警告が防止されます

numericOnly(event): boolean {
    // noinspection JSDeprecatedSymbols
    const charCode = (event.which) ? event.which : event.key || event.keyCode;  // keyCode is deprecated but needed for some browsers
    return !(charCode === 101 || charCode === 69 || charCode === 45 || charCode === 43);
}
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.