如果条件“//”JS，则在输入中的文本旁边写入文本答案

【问题标题】：Write text next to text in a input if contient "//"JS如果条件“//”JS，则在输入中的文本旁边写入文本
【发布时间】：2021-08-28 15:07:02
【问题描述】：

如果条目中的文本包含“//”，我想在 JavaScript 中显示占位符（或灰色文本）。

（这个想法不是我出的，我把它放在了这里） https://dribbble.com/shots/14433695-Task-composer-interactions

您知道如何在已包含文本的条目中显示文本吗？

提前感谢您的帮助。

【问题讨论】：

标签： javascript html input placeholder

【解决方案1】：

这是一种解决方案。它使用 2 个输入和 jQuery 来操作 DOM（但 vanilla 也可以正常工作）。它不是非常强大，但可以完成您提出的问题。因为输入会自动调整大小，所以我正在导入并使用等宽字体，并使用ch 单位来测量输入的长度。

$('.faux-element .main-input').on('input', function(e) {
  let l = $(this).val().length;
  $(this).css({
    width: l + "ch"
  });
  if ($(this).val().includes('//')) {
    let second = $(this).parent().find('.secondary-input').attr('readonly', false);
    second.attr('placeholder', 'Another place to type').focus();

  }
}).focus()

.faux-element {
  padding: 10px;
  background: #f0f0f0;
  border-radius: 4px;
}

.faux-element input,
.faux-element input:focus {
  border: none;
  outline: none;
  background: none;
  font-family: 'Roboto Mono', monospace;
}

.secondary-input {
  display: inline-block;
  margin-left: 2px;
  color: #f00;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@400&display=swap" rel="stylesheet">
<div class='faux-element'>
  <input class='main-input' /><input class='secondary-input' readonly />
</div>

【讨论】：