Material UI：从 TextView 中删除向上/向下箭头拨盘答案

【问题标题】：Material UI: Remove up/down arrow dials from TextViewMaterial UI：从 TextView 中删除向上/向下箭头拨盘
【发布时间】：2018-11-22 04:57:16
【问题描述】：

我在 Material UI 中有这个 TextView：

<TextField
      id="contact phone number"
      label="Contact phone number"
      type="number"
      value={this.state.contactPhoneNumber}
      onChange={this.handleChange('contactPhoneNumber')}
      placeholder="Contact phone number"
      margin="normal"
/>

看起来像这样：

如何从 TextView 中移除向上和向下箭头转盘？

【问题讨论】：

就像 Allen G 说的，type="tel" 似乎工作得很好jsfiddle.net/w5246Lzd/1

标签： reactjs material-ui

【解决方案1】：

您可以尝试使用 css 方法。

input[type=number]::-webkit-inner-spin-button, 
input[type=number]::-webkit-outer-spin-button { 
  -webkit-appearance: none; 
  margin: 0; 
}

【讨论】：

为我工作。如果您不想影响所有输入，则可以将类添加到 TextField 并像这样使用： .mui-number-field { input::-webkit-inner-spin-button, input::-webkit-outer-spin -button { -webkit-外观：无；边距：0； } }

【解决方案2】：

从TextField docs 开始，type 属性接受有效的 HTML 输入类型。我相信存在向上和向下箭头的原因是因为您将 number 指定为类型。

改用type="tel"，因为它似乎是电话号码的标准输入类型。

这是reference to the tel type 以及为什么使用它是个好主意。请注意，如果当前浏览器不支持它，它将回退为常规文本字段。

【讨论】：

如果你能分享一种像电话号码一样格式化数字的方法，我会给你加分
这个解决方案对我有用，我想知道的一件事是如何取回我使用 type="number" 进行的数字数据类型验证？
我投了反对票，因为虽然这是一个快速修复，但它删除了所有验证内容是否为有效浮点数或整数的验证，这意味着您在表单验证中还有更多工作要做。通过 css 删除箭头（其他答案）将保留数字约束，同时仍然解决问题。

【解决方案3】：

这对我有用（css 帮助：https://www.w3schools.com/howto/howto_css_hide_arrow_number.asp）

input: {
    background: theme.palette.secondary.main,
    border: `1px solid white`,
    flex: 1,
    padding: '8px',
    '&[type=number]': {
      '-moz-appearance': 'textfield',
    },
    '&::-webkit-outer-spin-button': {
      '-webkit-appearance': 'none',
      margin: 0,
    },
    '&::-webkit-inner-spin-button': {
      '-webkit-appearance': 'none',
      margin: 0,
    },
  },

【讨论】：

【解决方案4】：

在 React v 17.0.2 和 Material-UI v 4.11.4 中，这对我有用：

input: {
    '& input[type=number]': {
        '-moz-appearance': 'textfield'
    },
    '& input[type=number]::-webkit-outer-spin-button': {
        '-webkit-appearance': 'none',
        margin: 0
    },
    '& input[type=number]::-webkit-inner-spin-button': {
        '-webkit-appearance': 'none',
        margin: 0
    }
},

我刚刚将classes.input 作为className 传递给TextField

【讨论】：

【解决方案5】：

这个问题很老，但也许这个答案可能会帮助那些仍在寻求有效答案的人。

如果您使用概述的文本字段，您可以创建一个类，例如，

textfieldClass: {
'& .MuiOutlinedInput-input': {
  '&::-webkit-outer-spin-button, &::-webkit-inner-spin-button': {
    '-webkit-appearance': 'none',
},
}

},

如果您使用带下划线的文本字段；

textfieldClass: {
 '& .MuiInput-input': {
  '&::-webkit-outer-spin-button, &::-webkit-inner-spin-button': {
    '-webkit-appearance': 'none',
  },
 }
},

然后您可以在 TextField 中使用它，例如：

<TextField
  className={classes.textfieldClass}
  id="contact phone number"
  label="Contact phone number"
  type="number"
  value={this.state.contactPhoneNumber}
  onChange={this.handleChange('contactPhoneNumber')}
  placeholder="Contact phone number"
  margin="normal"

/>

【讨论】：

【解决方案6】：

只需将 type="number" 改为 type="tel"

【讨论】：