for a multiline textinput, when user press enter key, I want to achieve the goals:

• keep textinput focus when user press enter key.
• prevent add a new line.

i have't see any props what can do it, anyone has ideas?

react-native version is 0.28+, need supports ios and android.

for a multiline textinput, when user press enter key, I want to achieve the goals:

• keep textinput focus when user press enter key.
• prevent add a new line.

i have't see any props what can do it, anyone has ideas?

react-native version is 0.28+, need supports ios and android.

• javascript
• react-native

• 1 @Ctc this is not a duplicate. Your issue is for the web, not react native. – Rob Fox Commented Jul 20, 2016 at 8:09
• 1 Have the same exact issue. Cleaning up the value of textinput inside the text change callback causes flicker not only in editor itself but also changes hints etc so it is very obvious something is going on - not a good user experience. Still searching for better solution. This is NOT A DUP. – Moonwalker Commented Sep 6, 2016 at 9:17
• Did you ever find a solution for this? I also want to block a change. – Noitidart Commented Mar 5, 2018 at 15:34
• 1 @Noitidart check my answer below – Tharzeez Commented Mar 7, 2018 at 13:10

3 Answers 3

In TextInput passing the props

blurOnSubmit = {true} and then in onBlur props focus the textInput field using ref,these two will prevents from entering a new line and the focus is retained on the text input field. If you want only to prevent the user from entering a newline blurOnSubmit = {true} is sufficient

The drawback here is you can see keyboard hides for a moment then pops up. Its bit like a hack. Hope someone can come up with another or improvise this

You can setup your TextInput with multiline and blurOnSubmit to false. This will keep the keyboard and allow multiline in the input.

And use the onKeyPress props only for sending a message.

onKeyPress({ nativeEvent: { key: keyValue } }) {
    if (keyValue === "Enter") this.sendMessage();
}

with

onMessageInputChange(message) {
    this.setState({
        message,
    });
}

This should work in both Android and iOS.

            <TextInput
                value={message}
                onChangeText={this.onMessageInputChange}
                onKeyPress={this.onKeyPress}
                returnKeyType="send"
                blurOnSubmit={false}
                multiline
            />

Here is example:

$(".Post_Description_Text").keydown(function(e) {
  if (e.keyCode == 13 && !e.shiftKey) {
    e.preventDefault();
    alert("New line entered");
  }
});

.Post_Description_Text {
  width: 500px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<textarea name="comment_text" id="comment_text" class="Post_Description_Text"></textarea>