javascript - 可以在 textarea 中输入的 cols 数量限制

Question

我有一个 textarea 和 input [type=image] 最后定位(绝对)在里面。

当用户键入文本时，文本可能会像这样显示在图像下方

但我想要的是作为谷歌翻译的版本 - 限制可以输入的列数或为图标提供更多可用空间

这是我的代码

#cross {
  position: absolute;
  margin-left: -19px;
  margin-top: 36px;
}

<div class="form-group col-md-6" id="txtbox1">
  <input type="image" onclick="clearMessageArea('#userMessage')" src="img/cross.svg" id="cross" style="width: 14px; height: 14px" />
  <textarea class="form-control" id="userMessage" rows="6" style="resize: none"></textarea>
</div>

Answer 1

您可以使用一些 padding-right 来避免字符到达右边缘。但这意味着其他线也不会到达右边缘。

#cross {
  position: absolute;
  margin-left: -19px;
  margin-top: 36px;
}

#userMessage {
  padding-right: 15px;
  width: 200px;
}

<div class="form-group col-md-6" id="txtbox1">
  <input type="image" onclick="clearMessageArea('#userMessage')" src="https://placehold.it/14" id="cross" style="width: 14px; height: 14px" />
  <textarea class="form-control" id="userMessage" rows="6" style="resize: none"></textarea>
</div>

更新:Google 也为此使用了 padding-right: 20px。你可以查看here .