定制高度随输入内容变化的输入框

需求:定制高度随输入内容变化的输入框;没有内容时单行高度36px,内容少于4行时随输入内容的增加或者减少变换输入框的高度,大于4行后高度不变,内容上下滚动;

难点:没有内容时的高度和内容文字减少时行高变小;

交互

解决方案:hostInput作为高度随输入内容变化的输入框,新建一个shadowbox,高度为0,宽度等于hostInput的宽度,超出隐藏,在shadowbox里放一个shadowInput的块,块的文字内容和输入框的文字内容和样式都一致,然后取shadowInput的高度作为hostInput的高度进行计算。

HTML:

CSS:

JS:

猜你喜欢

转载自www.cnblogs.com/vicky24k/p/11464909.html