Question

我可以将占位符放在文本区域的右下角，但是在输入一些文本并清除文本后，占位符位置将被重置。有人知道清除文字后如何防止占位符重设位置吗？

Utilities.decideInitialViewController(window: self.window!)

textarea {
    display: block; 
    height: 150px;
}

textarea::-webkit-input-placeholder {
  /* Chrome/Opera/Safari */
  position:absolute;
  bottom: 10px;
  right: 16px;
  color: red;
}

Answer 1

您可以使用此技巧

* {
    box-sizing: border-box;
}

.form-group {
    position: relative;
    max-width: 200px;
}

label {
    position: absolute;
    right: 10px;
    bottom: 10px;
        display: inline-block;
}

textarea {
    width: 100%;
    padding: 20px;
}

<div class="form-group">
      <label>test</label>
      <textarea rows="5"></textarea>
    </div>

无论长度如何，这将始终坚持到文本区域的末尾。您还可以添加jQuery函数以在标签具有某些值时隐藏标签。

Answer 2

您可以使用::placeholder选择器，然后仅应用text-align:right。然后使其显示在底部，请应用transform:translateY(x)，其中x是输入的高度。

textarea {
  width:500px;
  height:150px;
}

textarea::placeholder {
  text-align:right;
  transform: translateY(150px);
}

<textarea placeholder="Lorem Ipsum"></textarea>

Answer 3

如果您希望placeholder-text与textarea的 right 对齐，则可以简单地使用：

textarea::placeholder {
  text-align: right;
}

为了将placeholder-text对准textarea的底部，一种方法是给placeholder-text line-height对应于：

将height的{{1}}减去textarea的{{1}}的两倍

我们可以手动执行此操作（即，每次更新font-size的{{1}}时，我们也会更新placeholder-text的{{1}}），但这在这里效率更高使用 CSS自定义属性和height。

如果我们建立以下自定义属性：

textarea

那么我们知道line-height中的placeholder-text总是：

calc()

这意味着我们现在可以任意更改:root { --textareaHeight : 150px; --placeholderFontSize : 14px; }和line-height的值，并且placeholder-text的{{1}}将始终正确计算。

工作示例：

calc((var(--textareaHeight) * 2) - var(--placeholderFontSize))

--textareaHeight

如何将textarea的占位符对齐到右下角？

3 个答案: