如果内容为“//”JS，请在输入中的文本旁边写入文本

Question

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

（想法不是我出的，我在这里注明） https://dribbble.com/shots/14433695-Task-composer-interactions

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

预先感谢您的帮助。

Answer 1

这是一种解决方案。它使用 2 个输入和 jQuery 来操纵 DOM（但香草也可以正常工作）。它不是非常强大，但可以完成您提出的问题。因为输入会自动调整大小，所以我正在导入并使用等宽字体，并使用 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>

如果内容为“//”JS，请在输入中的文本旁边写入文本

Write text next to text in a input if contient "//"JS

html

javascript

input

placeholder