PG Software Development

Hi Clifton,

I'm trying to insert accented characters like é into an editable field. I can already do this using an embedded CKEditor pad which has an insertText function but now I need to do this using an ordinary TB field. The character must be inserted after the current caret position. The character is chosen from a small virtual keyboard which is part of my program.

I have thought of a possible solution:

Use caretPosition to determine where the user wants to put the character (usually at the end but it could be anywhere in the text) put chars 1 to caretPosition of the text into variable txt1 and chars caretPosition + 1 to charCount(text) into variable txt2 (but charCount() is not available I think so I would have to use the Javascript length property?) then redefine the text as txt1 + special character + txt 2 and reset the caretPosition to caretPosition + 1.

But this seems a bit complicated. Is there a better way, please?

UPDATE
Alternatively I could continue using the embedded CKEditor pad and convert the HTML code back to normal text using setHTMLContent. This might be simpler.

Here is what I came up with:

Actions to insert string at current caret position

Graphic1.PNG (49.89 KiB) Viewed 640 times

Description of numbered actions:

1. Create a tmp variable and initialize it as an array. Store the characters to insert (one or more) in tmp [ "newChars" ] ... which becomes a property of the array tmp. I like to stick with a single named variable for routines like this, but you could use multiple variables if you prefer more complexity.
2. Get and store the caret position using PowerPac's caretPostion() function and store it in tmp [ 0 ].
3. Create a substring from BEFORE caret position catenating the new characters to add to the end of this substring. Store it in tmp [ 1 ].
4. Create a substring from AFTER the caret position to the end of the text string. Store it in tmp [ 2 ].
5. Replace the text in the field by catenating the new substrings together to form a single string.
6. Reset the caret position with PowerPac's caretPosition() function using tmp [ 0 ] as the saved caret position from action 2.
   NOTE: Use tmp [ 0 ] + charCount( tmp [ "newChars" ] ) if you want to adjust the caret position to be after the newly inserted string.
   There is no need to capture the return in this action, but I copied it from the action 2 and there is no harm in this.

NOTE: This works in all browsers. However, the best place to put this is on the user event of the text field because this provides a way for your virtual keyboard to send it's keys to the field. If you use the user event, you can set the [value] paremeter to be equal to the keys to insert.

Thank you for the example. I'll try to replicate it in my program and let you know how I get on but I won't be able to do this until next week now.

Hi Clifton,

I have managed to use your code and the system works perfectly. I added it to my original system which was already in place. This sets the text of a field to the appropriate number of the character required to the value used by javascript String.fromCharCode(N). There are some complications notably in French which puts spaces before question marks, exclamation marks etc. French always has to be different!