Get Caret Position in TextBox

Ask the community
,
1

Hey Forum

Does anyone know if there is a way to get the position of the caret in a textBox?

E.g. something like, but something that works :joy:

export function textBox2_keyPress(event) {

let position = event.key;
const getCaretPosition = position.selectionStart;
console.log(getCaretPosition);

}

or the equivalent of

export function textBox2_keyPress(event) {

var ctl = document.getElementById('Javascript_example');
var startPos = ctl.selectionStart;
var endPos = ctl.selectionEnd;
alert(startPos + ", " + endPos);

}

Thanks in advance!

2

nudge

3

You can use your shown code ā€¦

exportfunction textBox2_keyPress ( event ){ var ctl = document . getElementById ( ā€˜Javascript_exampleā€™ ); var startPos = ctl . selectionStart ; var endPos = ctl . selectionEnd ; alert ( startPos + ", " + endPos );

For example inside of an HTML-Component (iFrame), or you use a Custom-Element.

What is your exact aim? What do you want to achieve?

If you want to determine the LENGTH of the selected TEXT/STRING, i donā€™t think you will be able to do this directly in wix.

But as already mentioned you can use the HTML-Component for your purpose.

Communicate trough HTML-Component, then your wished feature will be possible.

But maybe anyone else has even a better solution, who knows.

4

Thereā€™s 2 options depend on you needs.

Option 1:
create an onClick event and get the position details once clicked (and not with every key type:

export function textBox2_click(event) {
const {clientX, clientY, offsetX, offsetY, pageX, pageY, screenX, screenY} = event;
console.log(clientY, offsetY, pageY, screenY);
}

Option 2 (more complicated, but you get it with each key type):
Add a custom element to your page.
In the custom element file add an onKeyDown event listener to the window.
Once clicked get the event.target coordinates and move them to the Velo page code (with dispatchEvent). An in the Velo onKeyPress handler, read the latest received values (set a small timeout for that)

5

Ninja, you do not have an access to the DOM directly from the Velo page code nor from an Wix iframe (which is sandboxed).

6

Hi JD and Velo-Ninja

Thanks for the replies.

Sorry, I meant the cursor position within the textBox as I type.

For instance, onKeyPress returns the position in the Box. In this image, it would return ā€œ6ā€.

In this one ā€œ2ā€

Or 5/1 depending on if it started from 0.

7

Ah, so you meant position in character index. Sorry I read your original post too quickly.
I think the only way to do it is by setting an event listener in a custom element and dispatch the event.target.selectionStart.

8

Hi JD

Thanks for the nudge in the right direction. Iā€™ve got this so far, but it doesnā€™t seem to be registering anything.

I added the HTML element to the page:

Then added the following code to it and include the element ID

709Ɨ248 74.1 KB


<!doctype html>
<html>
<head>

<script type="text/javascript">

(function(){
  
document.getElementById('textarea_comp-l8ix2c5n').addEventListener('keyup', e => {
  let msg = e.target.selectionStart;
  insertMessage(msg);
})

})();

function insertMessage(msg) {
  document.getElementById('demo').innerHTML = msg;
}
  
</script>

</head>
<body>
<p id="demo">Message will go here</p>
</body>
</html>
9

Hi, this is not a custom element code (maybe you put custom code instead of custom element. But custom code canā€™t communicate with the Velo page code).
See here:
https://www.wix.com/velo/reference/$w/customelement/introduction
https://support.wix.com/en/article/velo-example-coding-a-basic-custom-element-with-images