Forum Academy Marketplace Showcase Pricing Features

Add any text in any position within a text entry!

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:

Add a text inside multiline input, without reset initial content

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:

  1. Format document texts, with pre-established data.
  2. Format medical prescriptions with database medications.
  3. Format texts for SMS and email with data from your database.
  4. Create tags like @text, #text, [text] and insert it inside the text input.
  5. In short, format any text with pre existing data or added by the user

@emmanuel @cakontel

6 Likes

What is the use case?

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:

  1. Format document texts, with pre-established data.
  2. Format medical prescriptions with database medications.
  3. Format texts for SMS and email with data from your database.
  4. Create tags like @text, #text, [text] and insert it inside the text input.
  5. In short, format any text with pre existing data or added by the user.
3 Likes

Hi @juancosta900

This is really helpful for adding text at any position in a text field.

What I am trying to achieve and struggling with is the following use case (please refer screenshot)

  1. Select value from Dropdown (Name)
  2. Click on Generate Text button

Expected Result:
The Multiline text field gets the corresponding value (Description) from the database matching the Name field.

Actual Result:
Nothing happens

I have set up a workflow when pressing the button, but it doesn’t seem to be right. Can you please help? Sorry if this is basic, but I’m not very proficient in this as yet.

I don’t mind resetting the Multiline text field to reflect the updated value (Description) from the database

I dont Think I can Help. But id try the find and replace option in your multiline text. So you can set the specifics texts from Dropdown to be Replaced .
Ex. (JujuNickName) --> Juan Costa.
( User ) --> current user

Have you tried binding the multiline input to the parent’s thing?

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.

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:

1 Like

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

2 Likes

same issue.

can someone please help?

1 Like

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.

Hi @juancosta900, do you know what are we doing wrong?

tahks !! :smiley: