入力styled-components Input数字

1.矢印を隠す

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,+-入力をブロック

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.数字の長さを制限する

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とは?

キーボードイベント