间距占位符答案

【问题标题】：Spacing placholder间距占位符
【发布时间】：2022-01-25 20:56:07
【问题描述】：

我如何在开始输入时离开占位符并向前延伸

比如当我输入 100 个空格和 INX 时

100 INX

这样当我输入 100 时，INX 向前移动，完全输入变为

100 INX

<!DOCTYPE html>
<html>
<body>

<h1>Extend placeholder forward</h1>

  <input type="text" id="left" name="left" oninput="right.value = left.value; return true;" placeholder="INX"/>
  <input type="text" id="right" name="right" oninput="left.value = right.value; return true;" placeholder="INX" disabled />

</body>
</html>

【问题讨论】：

建议你把它移出占位符，例如<input ...><span>INX</span>
您不能直接这样做 - 占位符的目的是在字段中输入内容后立即消失。
建议的<input ...><span>INX</span> 不会让您获得（假）占位符“跟随”输入文本的效果。您要么必须测量当前文本内容的宽度并相应地定位占位符（可能会变得复杂，特别是如果文本运行的宽度比输入字段的宽度更宽，那么它将不再从左侧开始）[ ...]
[...] - 或者将输入替换为带有contenteditable 的跨度，这将自动运行其文本内容所需的宽度。（您必须抓住输入的文本并将其放入隐藏字段，以防您想通过表单正常提交。）然后“占位符”可以正常流程。
或者，让 INX“静态”在一个固定宽度的输入字段后面，并将该输入的文本内容向右对齐可能会更容易一些......？不完全符合最初的需求，而是复杂性的潜在权衡......

标签： javascript html jquery css

【解决方案1】：

不，您不能修改原生占位符的行为。

使用定位、伪元素和 css 变量的一些 hacky 解决方法：

document.querySelector('#left').addEventListener('input', function() {
  this.parentElement.style.setProperty('--val', "'"+this.value+"'");
  document.querySelector('#right').value = this.value ? this.value + ' INX' : '';
});

#div1, #div2 {
  position: relative;
  display: block;
  width: fit-content;
  width: -moz-fit-content;
  --val: '';
  font-family: sans-serif;
  font-size: 14px;
}

#div1::after {
  content: var(--val) ' INX';
  position: absolute;
  left: 3px;
  top: 1px;
  bottom: 1px;
  pointer-events: none;
  line-height: 20px;
}

#left, #right {
  font-family: inherit;
  font-size: inherit;
  caret-color: black;
}

#left {
  color: transparent;
}

<h1>Extend placeholder forward</h1>

<div id="div1"><input type="text" id="left" name="left" maxlength="18" /></div>
<div id="div2"><input type="text" id="right" name="right" placeholder="INX" disabled /></div>

【讨论】：

【解决方案2】：

用输入元素做事很棘手——例如，你不能附加伪元素。

采取一种稍微不同的方法，如果您使用 contenteditable div 而不是输入，您可以附加一个带有 INX 作为内容的 after 元素，它会在用户键入时在实际输入之前移动：

div {
  display: inline-block;
  width: auto;
  border: 1px solid black;
  border-radius: 5px;
  background: #eeeeee;
  padding: 5px;
}

div::after {
  content: ' INX';
}

&lt;div contenteditable&gt;&lt;/div&gt;

【讨论】：