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

【问题标题】：How do I get my React TextField to open the number pad when inputting on a mobile device?在移动设备上输入时，如何让我的 React TextField 打开数字键盘？
【发布时间】：2019-04-25 15:58:07
【问题描述】：

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

我的 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"
/>

谢谢

【问题讨论】：

标签： javascript reactjs input mobile textfield

【解决方案1】：

2021 年更新

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

使用inputProps 确实可以解决问题。 inputProps 对象是应用于输入元素的属性。

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

【讨论】：

【解决方案2】：

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

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

【讨论】：

但是我没有输入标签，这是一个TextField
您的 TextField 是自定义组件还是库？如果是自定义将道具传递给子组件，如果是库，请尝试将它们添加到 TextField
它是 Material-UI TextField。我刚刚尝试将 type inoputMode 和 pattern 属性直接添加到我的 TextField 中，但这也不起作用
也在使用 material-ui 文本字段搜索解决方案。提供的解决方案不起作用。当我点击文本字段时，键盘已经显示了数字，但是所有其他符号也在那里，括号等。它不是专门的数字键盘。

【解决方案3】：

如果您想显示小数点，也很有用。您需要在输入标签中添加以下内容...

inputMode='decimal'

以下示例

<input 
   type='number' 
   step='any' 
   inputMode='decimal' 
   pattern='\d*'
/>

【讨论】：

【解决方案4】：

现实世界的例子 - 注意 inputProps 和 InputProps 在某种程度上是不一样的。

<TextField
    inputProps={{
        inputMode: 'decimal',
    }}
    InputProps={{
        startAdornment: (
            <InputAdornment position="start">
                <Icon />
            </InputAdornment>
        ),
        endAdornment: (
            <InputAdornment position="end">
                <IconButton
                    disabled={disabled}
                    onClick={() => {
                        swapCurrencies()
                    }}
                >
                    <SwapVertIcon />
                </IconButton>
            </InputAdornment>
        ),
    }}
    name={'amount'}
    className={classes.root}
    fullWidth
    disabled={disabled}
    onChange={e => {
        doStuff()
    }} />

【讨论】：