Virtual Keyboard in HTML5: Insert or Remove Text Based on Cursor Position in Input Box

I created a virtual keyboard in Adobe Animate as a part of a point-and-click text game. Clicking on the buttons on this keyboard will fill in a text input field (instance name: 'UserAnswerBox') or delete text from the input field. The code for these is as follows, but very speicifcally, it modifies the last element of the answer box:

//code inserting the letter a
this.A_btn.addEventListener('click',() =>{
document.getElementById('UserAnswerBox').value+='\u0061'
})

//code deleting the last letter

this.backspace_btn.addEventListener('click',() =>{
document.getElementById('UserAnswerBox').value=document.getElementById('UserAnswerBox').value.substring(document.getElementById('UserAnswerBox').value, document.getElementById('UserAnswerBox').value.length - 1)
})

I am looking for a way in Animate to modify the code so that virtual keyboard can allow letters to be inserted or deleted wherever the cursor currently is in the answer box. I wanted this because it will probably make more sense to users if the real keyboard and the virtual keyboard insert and delete text in the same way.