如何在移动设备上输入时让我的 React 文本字段打开数字键盘

Question

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

我的文本字段如下所示：

  <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

2021 年更新

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

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

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

Answer 2

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

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

Answer 3

如果你想出现一个小数点，了解也很有用。您需要将以下内容添加到您的输入标签中...

inputMode='decimal'

下面的示例

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

Answer 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()
    }} />

Answer 5

import React, { Component } from 'react';
import { TextField } from '@mui/material';
     
 export default function NumericField(props) { 
    const [state,setState] = React.useState(""); 
    const handleChange=(event)=> {
    const regx = /^[0-9b]+$/;
      if (event.target.value === '' || regx.test(event.target.value)) {
         setState( event.target.value);
  }
}
 return (
        <TextField 
            type="text"
            value={state}
            label={props.label} 
            fullWidth={props.fullWidth}
            onChange={handleChange} 
            id={props.id}
            required={props.required}
            disabled={props.disabled}
            error={props.error}
            helperText={props.helperText}
            name={props.name}/>
      
        );
    }