在移动设备上输入时，如何让我的 React TextField 打开数字键盘？

Question

我有一个接受用户输入的 React TextField，它代表一个日期。当用户单击该字段时，我希望打开数字键盘而不是完整的字母表。我在这里查看 React 文档并尝试模仿他们的示例。

我的 TextField 如下所示：

  <TextField
    { ...materialConfiguration }
    floatingLabelFixed={value.length > 0}
    floatingLabelText={label}
    errorText={errorText}
    onChange={this.onChange}
    onKeyUp={this.debouncedOnKeyUp}
    onBlur={this.onBlur}
    type="number"
    label="Number"
    id="standard-number"
    >
    <Cleave value={value} options={{date: true, datePattern: ['m', 'd', 'Y']}} />
  </TextField>

我添加了React 示例中的type label和id字段，认为这是改变键盘的原因，但它不起作用。如何获得此输入以打开数字键盘？

React 的例子是这样的：

<TextField
  id="standard-number"
  label="Number"
  value={this.state.age}
  onChange={this.handleChange('age')}
  type="number"
  className={classes.textField}
  InputLabelProps={{
    shrink: true,
  }}
  margin="normal"
/>

谢谢

Answer 1

您必须将此属性添加到您的输入标签中：

<input type='number' inputMode='numeric' pattern="[0-9]*" />

Answer 2

2021 年更新

  <TextField id="quantity" label="Quantity" inputProps={{ inputMode: 'numeric' }}/>

使用inputProps确实解决了问题。inputPropsobject 是应用于输入元素的属性。

https://material-ui.com/api/text-field/#textfield-api