入力styled-components Input数字

1.矢印を隠す

typeがnumberの場合に表示される矢印を削除

import styled from 'styled-components';
import Select from 'react-select'

const InputFeeField = styled.input`
  ::-webkit-inner-spin-button{
  -webkit-appearance: none; 
  margin: 0; 
  }
  ::-webkit-outer-spin-button{
  -webkit-appearance: none; 
  margin: 0; 
  }    
`;

<InputFeeField placeholder="배달료" type="number" />

2.e,+-入力をブロック

矢印を外すと、eと+-は入力できます.
これも外しましょう.

import styled from 'styled-components';
import Select from 'react-select'

const InputFeeField = styled.input`
  ::-webkit-inner-spin-button{
  -webkit-appearance: none; 
  margin: 0; 
  }
  ::-webkit-outer-spin-button{
  -webkit-appearance: none; 
  margin: 0; 
  }    
`;

<InputFeeField 
  onKeyDown={(e) => ["e", "E", "+", "-"].includes(e.key) && e.preventDefault()}
  placeholder="배달료" 
  type="number" 
/>

3.数字の長さを制限する

配送料は10,000個の5桁以内で解決されます.
5桁まで入力すれば終わりです.

import styled from 'styled-components';
import Select from 'react-select'

const InputFeeField = styled.input`
  ::-webkit-inner-spin-button{
  -webkit-appearance: none; 
  margin: 0; 
  }
  ::-webkit-outer-spin-button{
  -webkit-appearance: none; 
  margin: 0; 
  }    
`;

const handleInput = (e) => {
  const { value } = e.target;
  if (value.length >= 5) {
    e.preventDefault();
    return;
  }
};

<InputFeeField 
  onKeyPress={handleInput}
  onKeyDown={(e) => ["e", "E", "+", "-"].includes(e.key) && e.preventDefault()}
  placeholder="배달료" 
  type="number" 
/>

preventDefaultとは?

上記の問題解決で使用したpreventDefaultは何ですか?preventDefault:タグのデフォルトイベントの発生を阻止する方法
preventDefaultを呼び出すと、ブラウザコードで処理される既存の操作は実行されないため、イベントは発生しません.

キーボードイベント

onKeyDown(Keycode):ユーザーがキーを押したとき

と入力し、イベント発生後に

と入力する.onKeyUp(Keycode):ユーザが鍵を押して解放するとき

キー入力時、文字入力後にイベント

が発生する.onKeyPress(ASCII):実際に文字を入力した場合

と入力し、イベント発生後に

と入力する.

onKeyPressはASCII値なのでshift、ctrl、backspace、tab、韓/英などのキーは認識できません

イベント発生順

キーボード

を押す

onKey Downイベント

入力

文字

onKeyPressイベント

キーボードを押す

onKeyUpイベント

参考資料
stackoverflow
stackoverflow
stackoverflow
Event.preventDefault()