10 examples of 'allow only numbers in textbox react js' in JavaScript

5
function NumberInput(_ref) {
6
  var label = _ref.label;
7
  var value = _ref.value;
8
  var onChange = _ref.onChange;
9
  var min = _ref.min;
10
  var max = _ref.max;
11
12
  return React.createElement(
13
    'div',
14
    null,
15
    React.createElement(
16
      'label',
17
      null,
18
      label
19
    ),
20
    React.createElement('input', {
21
      value: value,
22
      onChange: onChange,
23
      type: 'number',
24
      min: min,
25
      max: max,
26
      step: 1
27
    })
28
  );
29
}

17
function InputNumber(props: Props) {
18
  function handleChange(value) {
19
    if (value !== props.answer.value) {
20
      props.onChange({
21
        ...props.answer,
22
        value
23
      });
24
    }
25
  }
26
27
  return (
28
    <KeyboardAwareScrollView style={styles.container}>
29
      <Text style={styles.label}>{props.question.label}</Text>
30
      <View style={styles.inputContainer}>
31
        <TextInput
32
          keyboardType="numeric"
33
          autoFocus={false}
34
          autoCorrect={false}
35
          style={styles.input}
36
          autoCapitalize="none"
37
          value={props.answer.value}
38
          onChangeText={handleChange}
39
          placeholder={props.question.defaultValue}
40
          underlineColorAndroid="transparent"
41
          selectionColor={Theme.colors.color1}
42
          placeholderTextColor={Theme.fontColors.light}
43
        />
44
      </View>
45
    </KeyboardAwareScrollView>
46
  );
47
}

119
function renderNumberInput(props, renderer = mount) {
120
  return renderer(<Number { ...props } />);
121
}

14
function InputNumber () {
15
  Component.call(this)
16
17
  this.setValue = this.setValue.bind(this)
18
}

27
export function createNumericInput(props: NumericInputProps, useFloat: boolean = false): HTMLInputElement {
28
  const input = document.createElement("input");
29
  input.type = "number";
30
  input.value = props.value.toString();
31
32
  input.onchange = () => {
33
    try {
34
      const value = useFloat ? parseFloat(input.value) : parseInt(input.value, 10);
35
      props.handler(value, input);
36
    } catch (_ex) {
37
      //
38
    }
39
  };
40
41
  if (undefined !== props.id) input.id = props.id;
42
  if (undefined !== props.display) input.style.display = props.display;
43
  if (undefined !== props.min) input.min = props.min.toString();
44
  if (undefined !== props.max) input.max = props.max.toString();
45
  if (undefined !== props.step) input.step = props.step.toString();
46
  if (undefined !== props.tooltip) input.title = props.tooltip;
47
  if (undefined !== props.disabled) input.disabled = props.disabled;
48
  if (undefined !== props.parent) props.parent.appendChild(input);
49
50
  return input;
51
}

5
shouldComponentUpdate(nextProps, nextState) {
6
    // checks for text tag render based
7
    // on previous property value
8
    return nextProps.stateValue !== this.props.stateValue;
9
}

5
function PureTextarea(props) {
6
  const id = props.id || props.field.join('.');
7
  const {containerClassName,
8
         textareaClassName,
9
         label,
10
         errorMessage,
11
         options,
12
         isRequired,
13
         isTouched,
14
         isValid,
15
         ...otherProps} = props;
16
17
  const containerClasses = {
18
    required: isRequired,
19
    error: isTouched && !isValid
20
  };
21
 
22
  otherProps.defaultValue = undefined;
23
  return (
24
    <div className={cx(containerClassName, containerClasses)}>
25
      <label htmlFor={id}>{label}</label>
26
      <textarea {...otherProps} id={id} className={textareaClassName} />
27
      <aside className='pure-form-message'>
28
        {isTouched ? errorMessage : null}
29
      </aside>
30
    </div>
31
  );
32
}

152
InputNumber (h, props, vm) {
153
  if (props.status === 'preview') return renderValue(h, formatValue(props.props.value))
154
155
  return (
156
    <this.source.InputNumber {...props}></this.source.InputNumber>
157
  )
158
}

95
parseNumber(value: string): number {
96
  return Number(value);
97
}

20
render() {
21
  return (
22
    <div style={styles.formElement}>
23
      <label style={styles.label} htmlFor={this.props.type}>
24
        {this.props.label}
25
      </label>
26
      <input
27
        id={this.props.type}
28
        style={{ ...styles.textbox, lineHeight: '100%' }}
29
        type={this.props.type}
30
        value={this.state.value}
31
        onChange={this.handleChange}
32
      />
33
      {this.props.children &&
34
        React.cloneElement(this.props.children, {
35
          password: this.state.value,
36
        })}
37
    </div>
38
  );
39
}