Question

我从前端开始，我通常是一个后端花花公子，我试图做一件简单的事情，但我真的不习惯，如果有人能启发我，那就太好了

我试图在输入值前添加“ <％”，在值后添加“％>”，并添加第二个元素； “％>”随文本动态移动。

如果有人有办法向我解释，那就太好了。：）

Answer 1

我可能会使用:before和:after伪元素进行类似的操作。您对于“随文本动态移动”的要求对于常规的表单输入实际上是不可行的，并且没有JavaScript，因为表单输入本身不会水平增长。为此，您可以在任何HTML元素上使用contenteditable属性，但是随后在提交表单时需要一些JS逻辑来处理值（例如，将contenteditable的文本值复制到隐藏的输入中）更改时）

.form__field {
  display: block;
}

.form__field > * {
  vertical-align: middle;
}

.form__input-wrap {
  display: inline-block;
  padding: 0 24px;
  position: relative;
}

.form__input {
  border: 0;
  border-bottom: 1px solid black;
  display: block;
  font-family: inherit;
  font-size: inherit;
}

.form__input:focus {
  border-bottom: 1px dotted black;
  outline: none;
}

[data-before]:before {
  content: attr(data-before);
  position: absolute; left: 0; top: 50%;
  transform: translateY(-50%);
}
[data-after]:after {
  content: attr(data-after);
  position: absolute; right: 0; top: 50%;
  transform: translateY(-50%);
}

<!-- regular form input, does not grow! -->
<label class="form__field">
  <span class="form__label">I'm the label</span>
  <div class="form__input-wrap" data-before="<%" data-after="%>">
    <input class="form__input" type="text" value="Some Value" />
  </div>
</label>

<!-- example with contenteditable, does do the "growing" input field part -->
<label class="form__field">
  <span class="form__label">I'm the label</span>
  <div class="form__input-wrap" data-before="<%" data-after="%>">
    <div class="form__input" contenteditable="true">Some Value</div>
  </div>
</label>

动态在输入值前后添加文本，而无需修改值

1 个答案: