如何使用 react-native 更改 Textinput 中的电话号码格式 [英] how to change the phone number format in Textinput using react-native

问题描述

我希望电话号码(工作电话)格式如下图所示，使用 react-native，任何人都可以帮助解决这个问题，非常感谢任何帮助

i want the phone number(work Phone) format to be as shown in the below image, using react-native,can any one help how to work out it,any help much appreciated

推荐答案

您可以使用正则表达式实现此目的...这将格式为 [phone]

You can achieve this with regular expressions... This will format like [phone]

onTextChange(text) {
    var cleaned = ('' + text).replace(/\D/g, '')
    var match = cleaned.match(/^(1|)?(\d{3})(\d{3})(\d{4})$/)
    if (match) {
        var intlCode = (match[1] ? '+1 ' : ''),
            number = [intlCode, '(', match[2], ') ', match[3], '-', match[4]].join('');

        this.setState({
            phoneNum: number
        });

        return;
    }

    this.setState({
        phoneNum: text
    });
}

然后在 ...

<TextInput 
    onChangeText={(text) => this.onTextChange(text) }
    value={this.state.phoneNum}
    textContentType='telephoneNumber' 
    dataDetectorTypes='phoneNumber' 
    keyboardType='phone-pad' 
    maxLength={14}
/>

这篇关于如何使用 react-native 更改 Textinput 中的电话号码格式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！