How to insert text at cursor's current position?

Ask the community
,
1

I have a button where it’s been coded to insert special symbols/signs into an input element when clicked on. However the only way it works now is by replacing the entire input element with the symbol/sign, hence overwriting whatever that has already been written in the input element.

Is there a way to code it where it can insert the symbols/signs at the cursor’s current position, appending the existing text and not overwrite existing text?

2

You need to get the current value of the input element, modify it (insert the symbol), and then set the input element to the newly modified string. Something like this:

let inputValue = $w("#input").value;	// get input string
inputValue = inputValue + '$';		// append a dollar sign to the string
$w("#input").value = inputValue;	// set input element to modified string

The above code is a very simple example. You can of course modify the string any way that you want.

3

Ah… that’s a very good workaround! It may not be exactly an appending action, but it gives the same output result. Thanks a million Yisrael! :+1:

4

Hi there,

I’d use the onInput() event handler to modify the input, this way the symbol will be automatically inserted.

$w("#input").onInput(event => {
    const value = event.target.value;
    if (value.includes('$')) {
        const modValue = `$${value.replaceAll('$', '')}`;
        event.target.value = modValue;
    } else {
        const modValue = `$${value}`;
        event.target.value = modValue;
    }
})

What the code does is check if the text has a symbol ($) or not, and add the symbol at the beginning if it doesn’t, and if it has a symbol, remove it from the text, then add it at the beginning of the text.