代码之家 › 专栏 › 技术社区 › Junius L.

如何将react native TextInput设置为手机号码输入

react-native

Junius L. · 技术社区 · 7 年前

我正在尝试将可访问性添加到 TextInput 在react native中,被读作手机号码而不是号码,如下所示。

<TextInput
    style={{height: 40, borderColor: 'gray', borderWidth: 1}}
    editable={false}
    accessibilityLabel={'26726855243'}
    value={'26726855243'}
  />

android对讲和iOS VoiceOver将其读作数字。我试过在数字之间加空格,但还是没用, accessibilityLabel={'26726855243'.split('').join(' ')}

1 回复 | 直到 7 年前

Peter B 7 年前

CSS3语音模块支持此行为: https://www.w3.org/TR/css3-speech/

对于您的特定示例,您可以创建一个“phone”类,如下所示:

<style>
  .phone {speak: digits;}
</style>

请注意,此行为当前仅由VoiceOver支持,而不是由TalkBack支持。

对于对讲和大多数其他屏幕阅读器,插入逗号而不是空格将起作用(屏幕阅读器通常暂停使用逗号、句点、分号、感叹号和问号,但不使用空格):

accessibilityLabel={'26726855243'.split('').join(',')}

然而!我鼓励你考虑不试图以这种方式管理屏幕阅读器行为。请记住,现代屏幕阅读器有多种用户处理数字和首字母缩略词发音的设置。通过尝试在开发人员端将他们的发音管理到这个级别,可能会导致用户出现意外行为。

推荐文章

Dglfwcfa · 将两个状态组合成一个,并将内容排序到嵌套对象中

6 月前

selcukctn · 如何在react native中制作无限动画?

6 月前

Bruno Nobre · 如何使组件只安装一次?

7 月前

Nejib Afdhal · 如何在带有类名的react native中使用顺风动画?

7 月前

MattJ · 无法处理javascript/react-native中null变量的情况

7 月前

barmin · React Native:组件“NativeCamera”的视图配置getter回调必须是一个函数(收到“undefined”)

11 月前

Tony · 如何为三元运算符的每个条件设置两种不同的样式?

11 月前

docker compose · React Native中椭圆或圆角矩形视图周围的进度边界

11 月前

Leonard · React Navigation v5 Redux

11 月前

Khuong Viet Tai · 无法创建react本机项目安装Pod失败

11 月前