如何使文本区域的可视范围紧贴文本区域的右侧？答案

【问题标题】：How to make the viewable scope of a text-area cling to the right hand side of the text-area?如何使文本区域的可视范围紧贴文本区域的右侧？
【发布时间】：2021-05-29 06:11:31
【问题描述】：

我目前有一个带有以下 CSS 类的文本区域：

.text-area {
    background-color: black !important;
    color: white !important;
    padding: 0px;
    width: 100%;

    height: var(--display-font-size);
    font-size: var(--display-font-size);
    line-height: var(--display-font-size);
    
    overflow-x: hidden;
    white-space: nowrap;
    resize: none;
    border: none;
    text-align: right;
}

这会产生一个不可调整大小且没有用户交互元素的单行文本区域。当我从a 输入到z 时，当前输出增长如下：

|.   abc|
|.  abcd|
|  abcde|
| abcdef|
|abcdef|
|abcdef|g

其中|...| 表示文本区域的可视区域。但是，我希望这个可视区域锁定在文本区域的右侧，以便产生这种效果：

|.   abc|
|.  abcd|
|  abcde|
| abcdef|
|abcdef|
a|bcdefg|

我该如何做到这一点？

编辑：

我一直在试验<input type="text"> HTML 元素，但它并没有解决我的问题。我不是直接在文本框中输入文本；相反，我生成了一个字符串并使用 value 字段将其放置在文本框中，因此当我将文本直接输入框中时，文本可能会粘在右侧，但我无法使用我的方法重现此行为。

【问题讨论】：

看起来很像您正在尝试重新发明文本框...
当我尝试重新创建它时，我已经得到了您想要的效果。实际失败的代码在调试时总是比图表更有帮助 - 请尝试分享一个工作示例（通过堆栈 sn-p 在问题中内联）你所拥有的与你想要的。

标签： html css

【解决方案1】：

没关系，我想我已经根据您编辑中的 cmets 弄清楚了您要做什么。您可以通过编程设置scrollLeft 属性以保持光标右对齐：

let val = 0;

function setText() {
  const input = document.querySelector('.text-area');
  input.value += " " + val++;
  input.scrollLeft = input.scrollWidth;
}

.text-area {
    background-color: black !important;
    color: white !important;
    padding: 0px;
    width: 100%;

    height: var(--display-font-size);
    font-size: var(--display-font-size);
    line-height: var(--display-font-size);
    
    overflow-x: hidden;
    white-space: nowrap;
    resize: none;
    border: none;
    text-align: right;
}

<textarea class="text-area"></textarea>
<button onclick="setText()">Update text</button>

基本上是从this thread借来的，还有一些建议。

【讨论】：