Add a text inside multiline input, without reset initial content

Need help
1

May anyone helpe me on how to add a text inside a multiline input? I.e, when i click a button add a text inside a multiline input in current position in text. The way bubble works all the initial content of multiline is changed.

@gaurav @StevenM @emmanuel

1 Like
2

HI @juancosta900 sorry, I am not sure I understand the question?

3

Hi @StevenM. Just looking for a way to add a text inside existing multiline text. ALL Bubble’s funccionality is to add a new content , for example, change the input data, but i can’t find a way. Example of what i want:

Input A: Current Text Current Text Current Text…

Result When click a Button add New text

Input A: Current Text (New Text) Current Text Current Text…

The New Text must depend on the Text cursor position.

4

Have you tried auto-binding the thing?

5

There’s no such direct workflow.What you can do is

  1. Create a small group (say group ‘X’), set its type to text and hide it
  2. set the initial content of the multiline input to be the ‘group X’s text’
  3. now you can display whatever you want initially as also the group X’s text
  4. When button is clicked -> take the data from multiline input, modify it as u need -> display the result in group X -> reset multiline input
6

Thanks, but It seems doesn’t work.
What i need is to add a preset text inside the multiline input text like the gif below

7
8

Do you need the text to be formatted like in your gif?
If yes i don’t think you can do that because the multiline input in Bubble is an html textarea and you can’t style individual text in a textarea.

If you don’t need to style the added text then i might have some idea.
Will try it and get back to you if it works.

9

Thanks friend. The style is not important. I wait Your solution

10

Ok so here is the idea.
You’re going to use copy and paste actions to achieve this.
For the copying, you can use, the Air Copy to Clipboard plugin.
Unfortunately the plugin currently doesn’t support paste from clipboard so i was hoping i could update the plugin with a paste action but it seems it’s not that simple.

But the idea was that when the user clicks on the text to be inserted, you will copy that text, then give focus to the input and do a paste action to paste the text in the current cursor position.

The challenge will be how to implement the paste action. It seems due to browser security it may not be easy to pull it off

11

Thanks. But I was using Copy to ClipBoard but it was not practit for my users and still has some bugs. I used the mention workflow with @, but It does not work in Rich Text input.

12

Thanks @gaurav . But I was using Copy to ClipBoard but it was not practit for my users and still has some bugs. I used the mention workflow with @, but It does not work in Rich Text input. Stilo waiting any solution.

13

Any Idea. @NigelG @vincent56 @fayewatson

14

I can’t think of any Bubble native way of doing it, so will need a bit of HTML/JS ?

15

Its a simple functionality that Bubble should add and have. @emmanuel

1 Like
16

I suspect it is easy enough with a little Javascript.

image

image

function insertAtCaret(areaId, text) {
		var txtarea = document.getElementById(areaId);
		if (!txtarea) { return; }

		var scrollPos = txtarea.scrollTop;
		var strPos = 0;
		var br = ((txtarea.selectionStart || txtarea.selectionStart == '0') ?
			"ff" : (document.selection ? "ie" : false ) );
		if (br == "ie") {
			txtarea.focus();
			var range = document.selection.createRange();
			range.moveStart ('character', -txtarea.value.length);
			strPos = range.text.length;
		} else if (br == "ff") {
			strPos = txtarea.selectionStart;
		}

		var front = (txtarea.value).substring(0, strPos);
		var back = (txtarea.value).substring(strPos, txtarea.value.length);
		txtarea.value = front + text + back;
		strPos = strPos + text.length;
		if (br == "ie") {
			txtarea.focus();
			var ieRange = document.selection.createRange();
			ieRange.moveStart ('character', -txtarea.value.length);
			ieRange.moveStart ('character', strPos);
			ieRange.moveEnd ('character', 0);
			ieRange.select();
		} else if (br == "ff") {
			txtarea.selectionStart = strPos;
			txtarea.selectionEnd = strPos;
			txtarea.focus();
		}

		txtarea.scrollTop = scrollPos;
	}

insertAtCaret('myField', "foo");
17

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 works in bubble:

bubble

18

Looks good :slight_smile:

Do you mind if I add this to BuildingOnBubble ?

19

OK, @NigelG.
I add this in ShowCase. See there.

1 Like
20

This topic was automatically closed after 70 days. New replies are no longer allowed.