how to keep track of letters in text overflow?-CodePudding

Hi Im working on a big project and the code is very complex to share parts of here. but i need to keep track of the letter that ii typing while the length of the name is bigger than the container. as you see in the video when text goes over the container it doesn't follow the letter that is being typed and you have to manually scroll. i need to follow the letters as i type it. note: the text box is not an input from html its a dive and the text is being typed by creating child divs in the text div that contain individual letters. the project is a mobile app built in cordova and it only works with a virtual keyboard no real physical keyboard functions here.

<div class="text-box">
<div>J</div>
<div>O</div>
<div>H</div>
<div>N</div>
</div>

CodePudding user response：

You could add an event listener to the div which listens for key presses and then scrolls to the extreme right of the div (unless it is a backspace or delete key which is pressed) using the following code:

let display = document.getElementsByClassName('text-box');
let maxXscroll = display.scrollWidth - display.clientWidth;


display.addEventListener('keydown', function() {
    if((e.which != 8) && (e.which != 46)) {
        display.scrollLeft = maxXscroll;
    }
})

I apologise if my code is not good (it worked for me) or my answer is insufficient but I hope it helps you!