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

Posted 2023-03-31

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

【英文标题】：How do I get my React TextField to open the number pad when inputting on a mobile device?

【发布时间】：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"
/>

谢谢

【参考方案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()
     />