实现pc端信纸留言板

Posted 2020-11-06 Y.zoro

效果如图:

 

我好像在哪里见过这样的形式，但却从来没有想过怎么实现，有种莫名的兴奋感。怎么控制什么时候换行，怎么控制中间的线条，这些视乎都是CSS无法实现的，我陷入了死局。寻找JS的做法，JS的挺复杂的，大致思路：模拟一个延时模拟一个光标闪动，然后监听客户输入文字数量，通过计算控制换行。难点：中英文的字符长度不一致，你永远不知道客户会输入什么。不足：无论是延时还是计算都太消耗浏览器内存。
以下是我对CSS个人理解:我觉得无论是交互还是布局都应该由CSS来实现，js最多承担开启这些交互的开关。因此这里我决定用CSS解决。只要用文本域就可以轻松解决换行问题，接下来就只需处理行高和线条的问题了。

html：

css：

 

思路：       

通过设置文本域的行高来控制行高，然后用div做三条线，设置高度与文本域行高度减去1px边框，然后通过maxlength控制输入总字数，然后用letter-spacing控制字符中间的间距填充。

要注意的地方:

 我们既可以点文本域，又要看到定位在文本域上div的线，所以我们要把文本域的层级设的比div的线高，然后把文本域的背景设为透明色，这样既可看到线的同时也可以点到文本域。

优势：         

减少代码的复杂度，性能更加优化，弥补Js所有的不足。

不足：           

通用性不够好，移动端存在光标过长的问题。

后续：

关于移动端文本域行高影响到光标长度问题还没有得到解决，css就是这么神奇，有些东西的出现是没有根据可行的，只有不断积累，不断成长，路漫漫其修远兮 吾将上下而求索。