Multi-line user input - Allow an option for "Enter" to send

Currently, “Ctrl+Enter” is the way for an input in a Multi-line user input to be sent for processing.

That is not intuitive for chat applications - in Web Whatsapp and Web Telegram, “Enter” alone is sufficient.

Please add in a toggle so that we can choose either “Ctrl+Enter” or “Enter” to send the Multi-line user input for processing.

The current workaround of “Just use single-line input where Enter is enough” is not what I want as single-line input does not allow for text wrapping.

3 Likes

Yes, this is something that really needs addressing given so many people are building Chatbots etc in Bubble, and users expect behaviour to be broadly consistent with what they already know. Shift+Enter would be fine for a line break, or at least to be given the options to choose what works best for you.

Add JS with toolbox on page load:

$(window).keydown(function(e) {
if (e.keyCode == 13 && !e.shiftKey) {
e.preventDefault();
$(’#message’).blur();
if($(’#enter’).length){
$(’#enter’).click();
}
}
});

where ‘message’ is the HTML custom ID of the multiline input and ‘enter’ is the ID of the ‘send’ button. When enter is typed without shift, it will simulate a click on the send message button.

6 Likes

@georgecollier I have been looking for a solution like this for 3 months and your solution works really well. Thank you so much!

I’m still pretty new to Bubble and had to make a few researches or adjustments after seeing your message. I will detail them below for other beginner users:

  1. Before anything, you will need to assign the IDs that you will use in your Javascript code to your “Send button” and your “Multiline input”. This option is deactivated by default in Bubble. To activate it, go to your application, then Settings on the left bar, then right at the bottom “Expose the option to add an ID attribute to HTML elements”.

  2. Then, go to the properties panels of your “Send Button” and “Multiline Input” . Right at the bottom, you should be able to assign them an ID. Put anything you want but something that will be unique.

  1. Then add the plugin Toolbox to your application if you don’t have it yet. You can find it here

  2. Go to your application page where you want to implement this feature, and then go to Workflows and make sure you have a Workflow “When Page Is Loaded”.

Capture d’écran 2023-10-11 à 16.52.42

  1. Then, create a step and go to “Plugins” and select the one called “Run Javascript”.

  1. For me initially, the code provided by @georgecollier didn’t work. You will need to change the the typographic (or “curly”) quotes used in the code, which can cause issues in JavaScript. It’s important to use straight quotes, either single or double. If you struggle here, just copy and paste the code into ChatGPT and ask to correct it.

  2. Don’t forget to change the IDs in the JavaScript snippet to the ones you have assigned to your “Send Button” and “Multiline Input”, and paste the code into the “Script” field in the workflow step.

Here is the screenshot of my final code that works:

Capture d’écran 2023-10-11 à 17.09.33

Capture d’écran 2023-10-11 à 17.09.59

Hope it helped!

Cheers

4 Likes