如何跟踪文本溢出中的字母？

Question

您好，我正在做一个大项目，代码非常复杂，无法在此处分享部分内容。但我需要跟踪我输入的字母，而名称的长度大于容器。正如您在视频中看到的那样，当文本越过容器时，它不会跟随正在键入的字母，您必须手动滚动。我需要在输入时跟随字母。注意：文本框不是来自 html 的输入，它是 dive 并且通过在包含 div 的文本 div 中创建子 divs 来键入文本=17=]双字母。该项目是一个内置于 cordova 的移动应用程序，它仅适用于虚拟键盘，此处没有真正的物理键盘功能。

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

Answer 1

您可以向 div 添加一个事件侦听器，它侦听按键，然后滚动到 div 的最右侧（除非按下的是退格键或删除键）使用以下代码：

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;
    }
})

如果我的代码不好（对我有用）或我的回答不充分，我深表歉意，但希望对您有所帮助！

如何跟踪文本溢出中的字母？

how to keep track of letters in text overflow?

html

javascript

css

cordova