将输入字段中的文本向左移动答案

【问题标题】：Move text in input field to the left将输入字段中的文本向左移动
【发布时间】：2022-12-05 21:48:19
【问题描述】：

我需要知道在附加内容时如何将文本向左移动。这是当前的技术水平：

如您所见，文本保留在第一个插入的字符上（当然，手动输入文本时不会发生这种情况）。

代码：

<input type="text" class="calc-previous-display" value="0" disabled />
<input type="text" class="calc-display" value="0" disabled />

.calc-display,
.calc-previous-display {
  width: 100%;
  border: none;
  background-color: var(--color-alt);
  color: var(--color-0);
  text-align: right;
  padding: var(--display-space);
}

.calc-display {
  font-size: var(--display-1-text);
}

.calc-previous-display {
  font-size: var(--display-0-text);
  border-bottom: var(--display-split);
}

function insertValue(el, val) {
  el.value += val;
}

我尝试了 .focus，但没有得到我期望的结果。

【问题讨论】：

我不太确定是否理解该请求。当您在其中输入文本时，您是否希望输入字段中的文本向左对齐？完成后回到右边？但另一方面你说“手动输入文本时不会发生这种情况”...所以我真的不明白你到底要什么

标签： javascript html css

【解决方案1】：

要将输入元素中的文本左对齐，您可以将以下 CSS 规则添加到样式表中：

.calc-display,
.calc-previous-display {
  text-align: left;
}

这将使.calc-display 和.calc-previous-display 元素中的文本向左对齐。

如果您愿意，还可以使用 direction: rtl; CSS 属性将文本右对齐。这个属性可以像这样使用：

.calc-display,
.calc-previous-display {
  direction: rtl;
}

这会将.calc-display 和.calc-previous-display 元素中的文本右对齐。

【讨论】：

我删除了关于插入符号位置的评论，因为我看到这个问题有多种有效解释。我仍然不明白它是如何正确匹配单词的“文本保留在第一个插入的字符上“但是好吧..因为 OP 没有守卫我想他会自己解决的
direction: rtl 不能很好地与运营商合作，所以我无法解决这个问题。 @DiegoD 我认为您的评论很有用，我正在测试它。

【解决方案2】：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <meta http-equiv="X-UA-Compatible" content="ie=edge" />
  <title>Static Template</title>
  <style>
    * {
      box-sizing: border-box;
    }
    
    .calc-display,
    .calc-previous-display {
      width: 100%;
      border: none;
      background-color: var(--color-alt);
      color: var(--color-0);
      text-align: right;
      padding: var(--display-space);
    }
    
    .calc-display {
      border: 1px solid red;
      font-size: var(--display-1-text);
      padding: 0.25rem;
    }
    
    .calc-previous-display {
      font-size: var(--display-0-text);
      border-bottom: var(--display-split);
    }
    
    .box {
      background-color: gray;
    }
  </style>
  <script>
    function append() {
      let v = document.querySelector("#el");
      v.value += 10;
    }
  </script>
</head>

<body>
  <div class="box">
    <input type="text" class="calc-display" id="el" />
  </div>
  <button onclick="append()">Append</button>
</body>

</html>

主要问题是——在您的输入中添加一些填充并将框大小设置为边框框。

【讨论】：