How can I get onKeyPress to give me the last key input with a Braille Display on iOS?

问题

I deleted the previous version of this question because it was all over the place. Sorry about that. I am using React Native. The issue I am having is that when using a Braille Display (Orbit Reader 20) to input letters into a TextInput field on iOS I get a concatenated string of all the character and not the last one I entered. I have tried this on Android as well, but on Android, it works the way I want it to. iOS will behave like Android, but only if I have focus on the onscreen keyboard and not on the actual input field.

Descriptions of the problem (all letters are typed with a braille display): I have focus on the input area, I type in the letter 'b'. In the input area, the letter 'b' appears which is what I want to happen. Next, I type in the letter 'c' which on Android will give me just the letter 'c', but on iOS I get the string "bc" which I get the key using keyPress.nativeEvent.key. It seems like iOS is not respecting the maxLength prop when input comes from the braille device.

What I have tried: I have tried to just cut the last letter off of the key by using keyPress.nativeEvent.key.slice(-1) which does give the single letter, but it messes with VoiceOver and TalkBack (example: 'a' is displayed in the text area then I type 'b' and the phone says "ab"). I have found that if I clear the input area using textInput.current.clear() when onChangeText is triggered it will give me the results I want in that keyPress.nativeEvent.key will give me the last letter, but it will clear out my text immediately and cuts off VoiceOver.

Code Snippet (this is the code for my custom TextInput component and just has some console.log statements so that I can see what is going on.):


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


const BrailleInput = props => {
    const textInput = useRef();
    const [valueLetter, setValueLetter] = useState('');

    const handleInput = input => {
        console.log("onChangeText: " + input);
    };

    const handleClear = keyPress => {
        setValueLetter(keyPress.nativeEvent.key);

        console.log("onKeyPress: " + keyPress.nativeEvent.key);
    };


    return (
        <View style={props.style}>
            <TextInput
                ref={textInput}
                style={styles.textInput}
                maxLength={1}
                autoCorrect={false}
                autoFocus={true}
                onKeyPress={handleClear}
                onChangeText={handleInput}
                value={valueLetter}
                caretHidden={true}
            />
        </View>
    );
};


const styles = StyleSheet.create({
    textInput: {
        height: '50%',
        width: '100%',
        borderColor: '#ffec33',
        justifyContent: 'center',
        alignItems: 'center',
        borderWidth: 4,
        color: '#ffec33',
        textAlign: 'center',
        fontSize: 40
    },
});


export default BrailleInput;

Output: iOS:

onKeyPress: a
onChangeText: a
onKeyPress: Backspace
onChangeText: 
onKeyPress: ab
onChangeText: a

Android:

onKeyPress: a
onChangeText: a
onKeyPress: b
onKeyPress: c

I want the iOS output to look more like the Android Output. For some reason, it gives me extra Backspace inputs for the iOS version which I think are the main reason VoiceOver is not working like I want.

In the end, all I want is to have accessibility focus on the TextInput area, have TalkBack/VoiceOver speak the single letter that I input then be able to type another letter in to replace the previous letter, rinse, repeat. I need an accessible solution to this I have already been able to make a non-accessible solution.

来源：https://stackoverflow.com/questions/59582404/how-can-i-get-onkeypress-to-give-me-the-last-key-input-with-a-braille-display-on

标签

javascript

ios

react-native

accessibility