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

Every line of 'allow only numbers in textbox react js' code snippets is scanned for vulnerabilities by our powerful machine learning engine that combs millions of open source libraries, ensuring your JavaScript code is secure.

All examples are scanned by Snyk Code

By copying the Snyk Code Snippets you agree to
this disclaimer
5function 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}
Important

Use secure code every time

Secure your code as it's written. Use Snyk Code to scan source code in minutes – no build needed – and fix issues immediately. Enable Snyk Code

17function 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}
119function renderNumberInput(props, renderer = mount) {
120 return renderer(<Number { ...props } />);
121}
14function InputNumber () {
15 Component.call(this)
16
17 this.setValue = this.setValue.bind(this)
18}
27export 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}
5shouldComponentUpdate(nextProps, nextState) {
6 // checks for text tag render based
7 // on previous property value
8 return nextProps.stateValue !== this.props.stateValue;
9}
5function 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}
152InputNumber (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}
95parseNumber(value: string): number {
96 return Number(value);
97}
20render() {
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}

Related snippets