html input text自动适应,HTML 自适应高度的输入框

背景:

实现一个自适应高度的输入框, 空格与换行每次最多只能输入一个;

尝试 与 思路

首先想到的就是 textarea, 但是需要设置高度或者行数 rows, 这样超出设定就会出现 滚动条, 而且空格与换行还是可以无限输入

enmmm... 然后想到貌似 div 也可以;

但是 div 不支持 placeholder, 还需要自己模拟, 还有同样的问题就是 空格与换行可以连续无限输入; 在各个浏览器与移动端设备跑一跑, 发现显示效果并不理想 (〃´皿`)q 只能放弃~

既然如此那还是换回 textarea 吧, 毕竟对于输入而言, 它还是很专业的

接下来需要解决的问题就是

1. 处理输入的内容, 使 空格 换行 不可无限输入

2. 处理 自适应的问题

下面使用 vue 的方式为例:

HTML 部分

CSS 样式部分

.Box {

width: 50%;

height: auto;

display: block;

padding: 5px 10px;

margin: 20px auto;

border: 1px solid rgba(0, 0, 0, 0.3);

}

.Box .InputBox {

width: 100%;

min-height: 20px;

display: block;

position: relative;

}

.Box .InputBox > .font {

font-size: 14px;

line-height: 20px;

font-family: Arial, Helvet