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

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

react-native

6

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 年前

1

5

Peter B 7 年前

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

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

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

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

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

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

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