Hello Bubblers. Just a interesting function we discovered to add any text in any position and at caret / cursor position inside a text input… Thanks for @NigelG help. The following code works in Bubble: Just add this code inside HTML Script: jQuery.fn.extend({ insertAtCaret: function(myValue){ return this.each(function(i) { if (document.selection) { //For browsers like Internet Explorer this.focus(); sel = document.selection.createRange(); sel.text = myValue; this.focus(); } else if (this.selectionStart || this.selectionStart == ‘0’) { //For browsers like Firefox and Webkit based var startPos = this.selectionStart; var endPos = this.selectionEnd; var scrollTop = this.scrollTop; this.value = this.value.substring(0, startPos)+myValue+this.value.substring(endPos,this.value.length); this.focus(); this.selectionStart = startPos + myValue.length; this.selectionEnd = startPos + myValue.length; this.scrollTop = scrollTop; } else { this.value += myValue; this.focus(); } }) } }); $(‘#test’).click(function() { $(“#textarea”).insertAtCaret(‘text’); }); And than add a button id called “test” and a text input id called “textarea” This is how it works in bubble: [bubble] Add a text inside multiline input, without reset initial content - #17 by juancosta900 you can use it for several things, since Bubble does not provide this action to add text like this: You can use this function to: Format document texts, with pre-established data. Format medical prescriptions with database medications. Format texts for SMS and email with data from your database. Create tags like @text, #text, [text] and insert it inside the text input. In short, format any text with pre existing data or added by the user @emmanuel @cakontel

Hi Scottb50 Yes, I did tinker around a bit more just today and auto-binding on parent element’s thing did the trick. Would also like to share that since I was pulling the data from the Database, any modifications in the multiline input were changing the text in the Database App Data. I had to first create a copy of the template in another table (Type) and then let the user modify the data there. Thanks for the help! [image]

Hi I’m trying to get this to work… but no succes yet… I think it’s because the code is not in the right place? I now have I here on the page: [15]

Hi guys, I am also trying to get the same thing done, I basically want to input an Emoji on the click into a multi line input. [image] I am trying to click on the emoticon but nothing happens on the input box. I am not sure if i am making some mistake here. I have added the snippet to the Page HTML element and have added the the test and Textarea as ID attributes in the Emoji’s and Multiline Input Respectively. Should i create a workflow for the same? Any help here would be great. @juancosta900 @NigelG @kavir.kaycee1 @scottb50 @Bubble

@sriram there are existing plugins for text editors that support inline emojis

did you get this to work? im trying same thing, i think the code is wrong.

i figured this out now, see demo here: [image] !Messaging system Showcase Messaging system from my main app Storywall, inspired by Askip Preview eyes Editor memo [image] [image] [image] [image] [image] [image]

[image] juancosta900: “test” Hi @juancosta900, I can’t make it works. I followed these steps: 1.) I pasted the code in an html script, 2.) then I created a multiline input (with id called textarea), 3.) then a button (with id called test). But I click the button and doesn’t works. Can you help me please? may be there are some bug with the format of the quotes " or ’ ´? thanks

same issue. can someone please help?

Same issur as well. Can’t make it work did someone find a solution ?

Thank you for this. Looks great unfortunaly , the editor doesn’t open. Can you explain step by step the workflow implemented and what to do in the input text when you go to the “design mode” ? what should we set in intitial content ? how it looks ? Thank very much, it would be very helpfull.

Add any text in any position within a text entry!

Showcase

anon65040322 March 17, 2019, 8:46am 12

i figured this out now, see demo here:

Topic		Replies	Views
Add a text inside multiline input, without reset initial content Need help	18	4809	April 2, 2018
How to "inject" text into a multiline text input using a button Need help	4	2568	December 20, 2019
Anyone know how to insert text at cursor in a rich text editor? Need help	4	1718	May 8, 2022
Adding text in input by button Need help	0	60	June 19, 2024
Reliable Chat Input in Bubble: Enter to Send + Shift+Enter + Emoji Safe like Slack. Expandable chat input Showcase	2	65	March 17, 2026

Add any text in any position within a text entry!

Related topics