可以在textarea中输入限制列数

Question

我有一个textarea并在结尾输入[type = image]（绝对）。

当用户输入文字时，文字可能会显示在此图片下方，如

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

这是我的代码

＆＃13;

＆＃13;

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

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 1

你可以有一些Data来避免让角色走到右边缘。但这意味着其他线路也不会走到右边缘。

padding-right

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

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

更新：Google也使用<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>。您可以查看here。

Answer 2

将填充权限应用于文本区域。见下面的工作示例。

＆＃13;

＆＃13;

*{
  box-sizing:border-box;
}
.wrap{
  position: relative;
}
.close{
  position:absolute;
  right:4px;
  top:0;
}
textarea{
  padding-right:14px;
  width:100%;
}

＆＃13;

<div class = 'wrap'>
<span class = 'close'>x</span>
<textarea  name="" id="" cols="30" rows="10">
  
</textarea>  
</div>

＆＃13;

＆＃13;

＆＃13;