inputType={"number"}，数字拨号盘未显示在 ios 中但在 android 中可见 - React js

Question

我正在使用 React Bootstrap 表单控件和输入组。

我创建了一个组件并在我的其他模块中使用。

代码如下：

import InputGroup from "react-bootstrap/InputGroup";
import Form from "react-bootstrap/Form"; 

export default class TextInput extends Component {

render() {
    var { value, maxLength, defaultInput, prefix, inputProps, placeholder, label, labelClass, formGroupClass, inputType, error, warning, onChange, disabled, mandatory } = this.props;
    return (
      <div className={styles.container}>
        <Form.Group className={formGroupClass}>
          {label?
            (<Form.Label className={labelClass}>{label}
              {mandatory ? <span className="text-danger"> *</span>
                : ""}
            </Form.Label>)
            : ""
          }
          <InputGroup>
            {prefix && prefix !== "" ?
              <InputGroup.Prepend>
                <InputGroup.Text>{prefix}
                </InputGroup.Text>
              </InputGroup.Prepend> : ""}
            <Form.Control isInvalid={!!error} className={warning ? "border border-warning " : undefined}
              disabled={disabled}
              type={inputType}
              placeholder={placeholder}
              value={value}
              defaultValue={defaultInput}
              maxLength={maxLength}
              onChange={(e) => onChange(e.target.value)}
              onKeyPress={(e) => this.onKeyUp(e)}
              {...inputProps}
            />            
          </InputGroup>
          <Form.Text className="feedback-warn text-warning">
            {warning}
          </Form.Text>
          <Form.Control.Feedback type="invalid">
            {error}
          </Form.Control.Feedback>
        </Form.Group>
      </div>
    );
  }
}

}

并在我的其他模块中使用此组件，如下所示：

<TextInput
   placeholder={formData.mobileNum.label}
   inputType={"number"}
   error={formData.mobileNum.errMsg}
   value={formData.mobileNum.value}
   prefix={"+91"}
   maxLength="10"
   onChange={(text) =>
            changeValue(formData.mobileNum.propName, text)
   }
/>

我遇到的问题是在 android 设备中，当我点击输入字段时数字键盘工作正常。

如果 ios 设备 inputType={"number"} 不工作，因为我无法获得数字键盘。

我尝试了一些修复，但它们也影响了 android。当我尝试输入输入字段时，我希望两个设备都有数字键盘。

Answer 1

<TextInput
   placeholder={formData.mobileNum.label}
   error={formData.mobileNum.errMsg}
   value={formData.mobileNum.value}
   prefix={"+91"}
   maxLength="10"
keyboardType="numeric" //add this
   onChange={(text) =>
            changeValue(formData.mobileNum.propName, text)
   }
/>

在文本输入中添加 keyboardType 并删除 inputType

Answer 2

我解决了这个问题。犯了一些愚蠢的错误，没有注意到 {...inputProps} 它包含所有剩余的输入道具。

在我的 TextInput 组件中简单地添加了方法：pattern 和 inputMode

var { pattern, inputMode } = this.props


 <Form.Control isInvalid={!!error} className={warning ? "border border-warning " : undefined}
              disabled={disabled}
              type={inputType}
              placeholder={placeholder}
              value={value}
              pattern={pattern} // add this
              inputMode={inputMode} // add this
              defaultValue={defaultInput}
              maxLength={maxLength}
              onChange={(e) => onChange(e.target.value)}
              onKeyPress={(e) => this.onKeyUp(e)}
              {...inputProps}
            />

然后在我的其他文件中像这样简单地使用这些道具：

<TextInput
   ..other props
   pattern={"[0-9]*"}
   inputMode={"numeric"}
   onChange={(text) =>
            changeValue(formData.mobileNum.propName, text)
   }
/>

pattern={"[0-9]*"} 和 inputMode={"numeric"} 将强制此 ios 设备使用数字拨号盘。尽管 pattern prop 本身就足够了，但如果 pattern 不起作用，inputMode 只是一个后备。

注意 -> 这不会影响 android 使用数字键盘的行为。

备选方案：

我们可以利用 {...inputProps}

而不是更改 Main 组件中的内容

<TextInput
   ...other props
   inputProps={{ pattern: "[0-9]*", inputMode: "numeric" }} //add this
   onChange={(text) =>
            changeValue(formData.mobileNum.propName, text)
   }
/>

inputType={"number"}，数字拨号盘未显示在 ios 中但在 android 中可见 - React js

inputType={"number"}, Number dial pad not showing in ios but visible in android - React js

javascript

ios

reactjs

react-bootstrap