TTIL

2021-12-31 HTML Validator / number type input で e を制御する

HTML Validator

html ファイルのvalidation, checker ってあるかな?って調べた。

The Nu Html Checkerは、W3CWhatWGでも利用されているHTMLのバリデーターです。上記W3CまたはWhatWGのページにアクセスして、チェック対象のページのURLを入力して、HTMLの仕様に準拠しているかどうかをチェックするというのが一般的な使い方です。

Java に依存していてなかなかヘビーだった。

validator/validator: Nu Html Checker – Helps you catch problems in your HTML/CSS/SVG

number type input で e を制御する

<input type="number"> を使うことで入力を数値のみに制御することができるが、eという文字列もまた入力可能になる。

これを制限したい場合は下記のようにする。

document.querySelector('input[type="number"]').addEventListener('keydown', event => {
  if (event.key === 'e') {
    event.preventDefault()
  }
})

ref. 📝数値という理由だけで input[type=”number”] 要素を使わない|たかもそ/Web Creator.|note

Vue.js の場合

<input type="number" @keydown.69.prevent>

ref. HTML の input type=”number” には e を入力できる - Qiita

数字における e の意味

ちなみに e の意味は10のべき乗

  • 1e2 = 1 × 102 = 100
  • 1e3 = 1 × 103 = 1000
  • 1e-2 = 1 × 10-2 = -100
  • 1e-3 = 1 × 10-3 = -1000

1e5、1e-6、1E+9などの数値の意味と注意点 - 具体例で学ぶ数学