In my React Native application, I have two TextInput components, one numeric and one default. The problem is that, onSubmitEditing works on the default keyboard on both iOS and Android, but it's not triggered on the numeric keyboard on iOS.
Default keyboard:
I use the default keyboardType in the example below. onSubmitEditing is triggered both on Android and iOS.
<TextInput
value={this.state.username}
onChangeText={(username) => this.setState({ username })}
onSubmitEditing={() => console.log('onSubmitEditing triggered')}
/>
Android keyboard has a tick-button and iOS keyboard has a return button. When I press these buttons, onSubmitEditing is triggered on both keyboards.
Numeric keyboard:
I used the numeric keyboardType in the following example. I added returnKeyType="done", because iOS keyboard does now show a button without setting returnKeyType.
<TextInput
value={this.state.password}
keyboardType="numeric"
onChangeText={(password) => this.setState({ password })}
onSubmitEditing={() => console.log('onSubmitEditing triggered')}
returnKeyType="done"
/>
Android keyboard shows a tick-button and it triggers onSubmitEditing when pressed. iOS keyboard shows a Done button above the keyboard, however it does not trigger onSubmitEditing.
I have tried using onEndEditing prop, but it does not work as onSubmitEditing. It is triggered on blur events too. onSubmitEditing is only triggered when the return key button is pressed, and that's what I exactly need.
Related
Is it possible to close react-native 'Modal' on pressing the escape key? I know other libraries 'react-modal' where Modal closes on pressing escape key out of box. But seems react-native Modal doesn't have this functionality out of box.
import { Modal } from "react-native";
<Modal
visible={isOpen}
transparent={true}
animationType={"fade"}
onRequestClose={() => {
console.log("On request close");
this.closeModal();
}}
>
<View>
// Other UI elements here
</View>
</Modal>
"onRequestClose" is not called when Escape key is pressed. Any workaround on how to close modal on pressing escape key?
Note: There is no TextInput which I have seen being suggested in few answers to capture key press events, so that cannot be used.
I use React Native TextInput and when I click twice capslock - icon appears. Is there a way to hide this behavior?
<TextInput
autoCompleteType="password"
onFocus={handleOnFocus}
textContentType="oneTimeCode"
secureTextEntry
placeholder="Make a strong password"
/>
I experience a weird ios keyboard issue on our pwa web page.
As the photo below, the keyboard body disppear while the toolbar remains. And once this situation appear, it will keep like that until I restart the pwa app.
We use react and the input element is a Material-ui Textfield. While there have some conditional render on parent component
function handleChange(e) {
var value = e.target.value;
setValue(value);
return 0
};
<MaterialUi_TextField
inputProps={"title": "quantity", "onFocus": onFocus, "onBlur": onBlur}
type={"number"}
value={value}
onChange={handleChange}
/>;
other info to mention:
ios version = 13.4.1, 13.6
there is a meta user-scalable=0 on the page
I'm trying to implement two text inputs. I'm not sure if the best practice is to wrap these inside a scroll view or not. However, when I do it as shown below, I just see a single line in the middle.
If I remove the scroll view and just leave a single Text Input, it displays a box with input that I can interact with. Though I'm still unable to get the keyboard to display on the simulator. But I can manually type in and change state.
Any idea on how to allow more than one text input, as well as how to show the native keyboard that pops up from the bottom?
render() {
return (
<ScrollView>
<TextInput
style={{height: 40, borderColor: 'gray', borderWidth: 1}}
placeholder="Enter item 1"
value={this.state.text}
onChangeText={this.onChange} />
<TextInput
style={{height: 40, borderColor: 'gray', borderWidth: 1}}
placeholder="Enter item 2"
value={this.state.text}
onChangeText={this.onChange} />
</ScrollView>
);
}
1 - For the iOS Simulator there is an option Hardware -> Keyboard -> Toggle Software Keyboard (which is unchecked by default). Checking this option should solve your issue of displaying the native keyboard.
2 - Regarding multi-line text input. Yes this is an issue, but there is a work around shared in this answer below. I'll attach the link to the answer for your reference.
P.s: I haven't tried it myself, but the answer has been marked to have solved the issue!
Multi-Line TextInput Hack - https://stackoverflow.com/a/31759113/5783646
Display keyboard in iOS Simulator: Hardware -> Keyboard -> Toggle Software Keyboard
Show more than one text input: My guess is that there are styles applied (or not applied) to a parent element or elsewhere that is preventing the TextInput from rendering at a useable size.
I created an example on RN Playground that demonstrates what you are asking for: https://rnplay.org/apps/ldlfWw
We are developing a hybrid mobile app using IBM Worklight 6.1.
For iOS, how to handle "Search" button event from the soft keypad that is displayed?
"handle" is a bit vague... What are you trying to accomplish?
You shouldn't need to detect any button, if you invoke the correct keyboard for the specific need.
The search button in the iOS keyboard will only appear if your input tag is inside a form element.
For example:
// This will display a return button.
<input id="textField" type="text"/>
// This will display a search button.
<form>
<input id="searchField" type="search"/>
</form>
In JavaScript, you can use the jQuery keypress event to trigger an action once the search button is tapped. For example:
$("#searchField").keypress(function() {
alert("Handler for .keypress() called.");
});
You could also "detect" the "type" of the keyboard, in the case of "search", like the following (but this is kinda obvious...):
if ($("#searchField").attr("type") == "search") {
alert("This search field is of type 'search'.");
}
Otherwise, you will need to implement native code (meaning a Cordova plug-in) to detect the type of the currently displayed keyboard and perform actions, etc...