javascript - TextInput placing an automatic "highlight" behind text react native - Stack Overflow

admin管理员组

文章数量:1416050

I've found this weird behavior in IOS (both on the simulator and on a real device, but I only have screenshots from the simulator) where on input to the TextInput ponent, it puts a weird highlight behind the text you input. I've referenced this (since closed) issue:

And I've scoured the docs () for an answer to this, but can't quite seem to e up with any answers. I thought I was close with the selectTextOnFocus prop, but I set that to false and nothing changed (the behavior remained).

I have also tried setting textDecorationColor and textShadowColor to transparent, to no avail. I am really at a loss of what to do right now.

Here is the code I have for the input:

import React from 'react';
import { View, Text, TextInput, StyleSheet } from 'react-native';

export class GeneralInput extends React.Component {

    constructor(props) {
        super(props);
        this.state = {
            placeholder: this.props.placeholder,
            inputValue: "",
            inputting: false,
        };
     }
    whenInputIsFocused() {
        this.setState({placeholder: ""});
    }
    whenInputIsBlurred() {
        if (this.state.inputValue === "") {
            this.setState({placeholder: this.props.placeholder});
        }
    }
    focusNextField(nextField) { this.refs[nextField].focus(); }

  render() {
    const autoFocus = this.props.autoFocus == 'true';
    const multiline = this.props.multiline == 'true';
    return(
        <View style={styles.outerContainer}>
            <Text style={styles.labelText}>{this.props.labelText}</Text>
            <TextInput 
                autoCapitalize='none' 
                autoFocus={autoFocus}
                onChangeText={(inputValue) => this.setState({inputValue})}
                value={this.state.inputValue} 
                secureTextEntry={this.props.secureTextEntry} 
                onBlur={this.whenInputIsBlurred.bind(this)} 
                onFocus={this.whenInputIsFocused.bind(this)} 
                underlineColorAndroid="transparent" 
                keyboardType={this.props.type} 
                returnKeyType={this.props.returnKeyType} 
                placeholder={this.state.placeholder} 
                placeholderTextColor='rgba(255, 255, 255, 0.3)'
                multiline={multiline}
                selectTextOnFocus={false}
                onSubmitEditing={() => {this.focusNextField(this.props.ref)}}
                blurOnSubmit={(this.props.moveAlongType === 'next') ? false : true}
                style={styles.inputStyles} />
        </View>
    );
  }
}

const styles = StyleSheet.create({
    outerContainer: {
        justifyContent: 'center',
        alignItems: 'flex-start',
        width: '90%',
        marginBottom: 20,
    },
    labelText: {
        fontFamily: 'rubik-bold',
        fontSize: 14,
        fontWeight: 'bold',
        color: '#fff',
        marginBottom: 5,
    },
    inputStyles: {
        height: 40,
        borderRadius: 2,
        backgroundColor: 'rgba(255, 255, 255, 0.3);',
        shadowColor: 'rgba(0, 0, 0, 0.15)',
        shadowOffset: {width: 0,height: 2},
        shadowOpacity: 0,
        shadowRadius: 0,
        width: '100%',
        textDecorationColor: 'transparent',
        fontSize: 14,
        color: '#fff',
        paddingLeft: 15,
        fontFamily: 'rubik-bold',
    },
});

And here are the screenshots of what is actually happening (the first screenshot is with the highlight, the second is just the input with the placeholder text for reference):

So the question is...how do I make that weird highlight go away on ios?

I've found this weird behavior in IOS (both on the simulator and on a real device, but I only have screenshots from the simulator) where on input to the TextInput ponent, it puts a weird highlight behind the text you input. I've referenced this (since closed) issue: https://github./facebook/react-native/issues/7070

And I've scoured the docs (https://facebook.github.io/react-native/docs/textinput) for an answer to this, but can't quite seem to e up with any answers. I thought I was close with the selectTextOnFocus prop, but I set that to false and nothing changed (the behavior remained).

I have also tried setting textDecorationColor and textShadowColor to transparent, to no avail. I am really at a loss of what to do right now.

Here is the code I have for the input:

import React from 'react';
import { View, Text, TextInput, StyleSheet } from 'react-native';

export class GeneralInput extends React.Component {

    constructor(props) {
        super(props);
        this.state = {
            placeholder: this.props.placeholder,
            inputValue: "",
            inputting: false,
        };
     }
    whenInputIsFocused() {
        this.setState({placeholder: ""});
    }
    whenInputIsBlurred() {
        if (this.state.inputValue === "") {
            this.setState({placeholder: this.props.placeholder});
        }
    }
    focusNextField(nextField) { this.refs[nextField].focus(); }

  render() {
    const autoFocus = this.props.autoFocus == 'true';
    const multiline = this.props.multiline == 'true';
    return(
        <View style={styles.outerContainer}>
            <Text style={styles.labelText}>{this.props.labelText}</Text>
            <TextInput 
                autoCapitalize='none' 
                autoFocus={autoFocus}
                onChangeText={(inputValue) => this.setState({inputValue})}
                value={this.state.inputValue} 
                secureTextEntry={this.props.secureTextEntry} 
                onBlur={this.whenInputIsBlurred.bind(this)} 
                onFocus={this.whenInputIsFocused.bind(this)} 
                underlineColorAndroid="transparent" 
                keyboardType={this.props.type} 
                returnKeyType={this.props.returnKeyType} 
                placeholder={this.state.placeholder} 
                placeholderTextColor='rgba(255, 255, 255, 0.3)'
                multiline={multiline}
                selectTextOnFocus={false}
                onSubmitEditing={() => {this.focusNextField(this.props.ref)}}
                blurOnSubmit={(this.props.moveAlongType === 'next') ? false : true}
                style={styles.inputStyles} />
        </View>
    );
  }
}

const styles = StyleSheet.create({
    outerContainer: {
        justifyContent: 'center',
        alignItems: 'flex-start',
        width: '90%',
        marginBottom: 20,
    },
    labelText: {
        fontFamily: 'rubik-bold',
        fontSize: 14,
        fontWeight: 'bold',
        color: '#fff',
        marginBottom: 5,
    },
    inputStyles: {
        height: 40,
        borderRadius: 2,
        backgroundColor: 'rgba(255, 255, 255, 0.3);',
        shadowColor: 'rgba(0, 0, 0, 0.15)',
        shadowOffset: {width: 0,height: 2},
        shadowOpacity: 0,
        shadowRadius: 0,
        width: '100%',
        textDecorationColor: 'transparent',
        fontSize: 14,
        color: '#fff',
        paddingLeft: 15,
        fontFamily: 'rubik-bold',
    },
});

And here are the screenshots of what is actually happening (the first screenshot is with the highlight, the second is just the input with the placeholder text for reference):

So the question is...how do I make that weird highlight go away on ios?

• javascript
• react-native

Share Improve this question Follow asked Nov 19, 2018 at 16:58 Adam McGurkAdam McGurk 47633 gold badges2222 silver badges5555 bronze badges 2

• can you please try again just by removing the style from <TextInput />. It may be the background color you have given in the styling tag – Siraj Alam Commented Nov 19, 2018 at 18:24
• @Siraj You were right, it was the background color, below is what I did to fix the problem. I'll post my answer, but if you want to post yours, I'll give you the answer! – Adam McGurk Commented Nov 19, 2018 at 21:00

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 4

Text is not getting selected, it is just the background color you have given in the style.

Just remove the background color from the style of the <TextInput />

So, as per @Siraj the reason this odd behavior was happening was because the background color I had applied to the <TextInput /> ponent was also being applied to the text being inputed. So, I wrapped the <TextInput /> in a <View />, applied the height, width, backgroundColor, shadow, and borderRadius props to the surrounding <View />, and it has the desired effect! See the code below:

import React from 'react';
import { View, Text, TextInput, StyleSheet } from 'react-native';

export class GeneralInput extends React.Component {

    constructor(props) {
        super(props);
        this.state = {
            placeholder: this.props.placeholder,
            inputValue: "",
            inputting: false,
        };
     }
    whenInputIsFocused() {
        this.setState({placeholder: ""});
    }
    whenInputIsBlurred() {
        if (this.state.inputValue === "") {
            this.setState({placeholder: this.props.placeholder});
        }
    }
    focusNextField(nextField) { this.refs[nextField].focus(); }

  render() {
    const autoFocus = this.props.autoFocus == 'true';
    const multiline = this.props.multiline == 'true';
    return(
        <View style={styles.outerContainer}>
            <Text style={styles.labelText}>{this.props.labelText}</Text>
            <View style={styles.inputContainer}> // added View
                <TextInput 
                    autoCapitalize='none' 
                    autoFocus={autoFocus}
                    onChangeText={(inputValue) => this.setState({inputValue})}
                    value={this.state.inputValue} 
                    secureTextEntry={this.props.secureTextEntry} 
                    onBlur={this.whenInputIsBlurred.bind(this)} 
                    onFocus={this.whenInputIsFocused.bind(this)} 
                    underlineColorAndroid="transparent" 
                    keyboardType={this.props.type} 
                    returnKeyType={this.props.returnKeyType} 
                    placeholder={this.state.placeholder} 
                    placeholderTextColor='rgba(255, 255, 255, 0.3)'
                    multiline={multiline}
                    selectTextOnFocus={false}
                    onSubmitEditing={() => {this.focusNextField(this.props.ref)}}
                    blurOnSubmit={(this.props.moveAlongType === 'next') ? false : true}
                    style={styles.inputStyles} />
                </View> // Closing the added View
        </View>
    );
  }
}

const styles = StyleSheet.create({
    outerContainer: {
        justifyContent: 'center',
        alignItems: 'flex-start',
        width: '90%',
        marginBottom: 20,
    },
    labelText: {
        fontFamily: 'rubik-bold',
        fontSize: 14,
        fontWeight: 'bold',
        color: '#fff',
        marginBottom: 5,
    },
    inputContainer: { // added styles
        height: 40,
        width: '100%',
        backgroundColor: 'rgba(255, 255, 255, 0.3);',
        shadowColor: 'rgba(0, 0, 0, 0.15)',
        shadowOffset: {width: 0,height: 2},
        shadowOpacity: 0,
        shadowRadius: 0,
        borderRadius: 2,
    },
    inputStyles: {
        height: '100%',
        width: '100%',
        fontSize: 14,
        color: '#fff',
        paddingLeft: 15,
        fontFamily: 'rubik-bold',
    },
});

本文标签： javascriptTextInput placing an automatic quothighlightquot behind text react nativeStack Overflow