材质UI自动完成-禁用键盘输入(在移动设备上) [英] Material UI Autocomplete - disable keyboard input (on mobile)

问题描述

我正在使用材料UI 自动完成组件进行多次选择.它在台式机上效果很好，但在移动设备上，我想禁用键盘输入，仅允许触摸选择.换句话说，我不希望出现智能手机键盘.

I am using the Material UI Autocomplete component with multi select. It works great on desktop, but on mobile, I would like to disable keyboard input and only allow touch selection. In other words, I don't want the smartphone keyboard to appear.

我在文档中没有找到与此相关的任何参数: https://material-ui.com/api/autocomplete/#props

I did not find any params for this in the docs: https://material-ui.com/api/autocomplete/#props

我试图禁用TextField，但是我仍然可以输入文本-似乎禁用的参数没有添加到页面源的输入字段中:

I tried to disable the TextField, but I could still enter text - it seems that the disabled param does not get added to the input field in the page source:

<Autocomplete
    disableClearable
    options={[...]}
    renderInput={(params) => <TextField {...params} label="xxx" disabled />}
    blurOnSelect="touch"
/>

我需要没有自动完成功能的自动完成组件:)-我也可以切换到默认的选择"组件，但是我想在桌面上保持自动完成.此外，自动完成"组件还提供了带有复选框的多项选择.

I need the autocomplete component without the autocomplete feature :) - I could also switch to the default Select component, but i would like to keep autocomplete on desktop. Also, the Autocomplete component offers multi-selection with checkboxes.

推荐答案

我认为，如果您希望禁用本机键盘，则应该为移动设备创建其他组件.Material-ui自动完成功能是在Material-ui TextField组件上构建的，在其上构建了Select组件.

I think that you should create different component for mobile if you wish disable native keyboard. Material-ui Autocomplete is build on the Material-ui TextField component, on which one is build Select component.

这对代码段执行相同的操作( https://material-ui.com/components/selects/#api )

This to pieces of code do the same (https://material-ui.com/components/selects/#api )

<InputLabel id="label">Age</InputLabel>
<Select labelId="label" id="select" value="20">
   <MenuItem value="10">Ten</MenuItem>
   <MenuItem value="20">Twenty</MenuItem>
</Select>

<TextField id="select" label="Age" value="20" select>
  <MenuItem value="10">Ten</MenuItem>
  <MenuItem value="20">Twenty</MenuItem>
</TextField>

因此，如果将禁用属性传递给自动完成组件中的TextField，则整个字段都将被禁用.

So if you pass a disable prop to the TextField in your Autocomplete component your whole filed will be disable.

要解决此问题，您可以创建一个组件，该组件对于台式机是自动完成的，对于移动版仅是选择字段.

To resolve that you can create one component which for desktop is autocomplete and for mobile is only select field.

常规选择组件确实提供了一种显示复选框的方法: https://material-ui.com/components/selects/#multiple-select

The regular select component does offer a way to show checkboxes: https://material-ui.com/components/selects/#multiple-select

这篇关于材质UI自动完成-禁用键盘输入(在移动设备上)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！