1

I have a react-component which is an input-field of the type number. When I press random numbers inside everything works fine, but when I want to erase everything there is always a zero inside the input-field which I can´t erase. Is is possible to blank out the input-field so that the zero disappear when I erase everything?

My component:

const NumberBox = (props) => {
  const onChanged = (event) => {
    props.onChange(+event.target.value);
  };

  const styles = {
    inputGeneral: {
    border: '0px',
    width: '100%',
    padding: '8px 16px',
    fontSize: '1.6em' } };

  return (
   <input
    style={styles.inputGeneral}
    type="number" 
    pattern="[0-9]*"
    value={props.value}
    onChange={onChanged}
  />);
 };
user2236165
  • 741
  • 2
  • 11
  • 24

1 Answers1

2

This is happening because of the behavior associated with the HTML5 number input type in Chromium (and possibly other browsers, too) ...

The simplest solution should be use text input type and manually validate/format your input...

See also this question/answer...

Community
  • 1
  • 1
MarcoS
  • 17,323
  • 24
  • 96
  • 174
  • This works fine the first time the input-field is shown, but if I type in any number and try to erase it the value in the input-field is set back to 0. One would think that the value would just be an empty string or something, but no .. – user2236165 Apr 27 '16 at 07:58
  • 1
    Why would you expect a blank string, it's a number input. – Henrik Andersson Apr 27 '16 at 08:06
  • @HenrikAndersson If i erase everything in an input-field I wouldn´t expect the number 0. I would expect the input-field to be empty. Maybe not an empty string, but empty none the less. – user2236165 Apr 27 '16 at 08:13
  • Remember it is a **number** type field: which number is 'empty field' ? I would say '0'... That's why you see a '0' in an empty number input field... It is probably a matter of conventions, but I find it quite reasonable... :-) – MarcoS Apr 27 '16 at 08:16