实现pc端信纸留言板
效果如图:
我好像在哪里见过这样的形式,但却从来没有想过怎么实现,有种莫名的兴奋感。怎么控制什么时候换行,怎么控制中间的线条,这些视乎都是CSS无法实现的,我陷入了死局。寻找JS的做法,JS的挺复杂的,大致思路:模拟一个延时模拟一个光标闪动,然后监听客户输入文字数量,通过计算控制换行。难点:中英文的字符长度不一致,你永远不知道客户会输入什么。不足:无论是延时还是计算都太消耗浏览器内存。
以下是我对CSS个人理解:我觉得无论是交互还是布局都应该由CSS来实现,js最多承担开启这些交互的开关。因此这里我决定用CSS解决。只要用文本域就可以轻松解决换行问题,接下来就只需处理行高和线条的问题了。
html:
css:
思路:
通过设置文本域的行高来控制行高,然后用div做三条线,设置高度与文本域行高度减去1px边框,然后通过maxlength控制输入总字数,然后用letter-spacing控制字符中间的间距填充。
要注意的地方:
我们既可以点文本域,又要看到定位在文本域上div的线,所以我们要把文本域的层级设的比div的线高,然后把文本域的背景设为透明色,这样既可看到线的同时也可以点到文本域。
优势:
减少代码的复杂度,性能更加优化,弥补Js所有的不足。
不足:
通用性不够好,移动端存在光标过长的问题。
后续:
关于移动端文本域行高影响到光标长度问题还没有得到解决,css就是这么神奇,有些东西的出现是没有根据可行的,只有不断积累,不断成长,路漫漫其修远兮 吾将上下而求索。
实现pc端信纸留言板的更多相关文章
- H5 canvas pc 端米字格 写字板
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- phpcms的评论改为留言板研究
研究背景: phpcms里面默认是没有留言板的,之前我的博客里发过一个二次开发简介,里面有一个简单的留言板,包含前台提供表单,后台留言审核等功能,但是不提供用户登录等操作. 研究思路: phpcms里 ...
- 【weiphp微信开发教程】留言板插件开发详解
基于weiphp框架的留言板插件教程: 1.功能分析 传统的留言板应该具有发布留言.查看留言.回复留言.管理留言等功能,本教程开发的是最基本的留言板,仅包含发布留言和查看留言两个功能,根据功能用boo ...
- Web开发从零单排之二:在自制电子请帖中添加留言板功能,SAE+PHP+MySql
在上一篇博客中介绍怎样在SAE平台搭建一个html5的电子请帖网站,收到很多反馈,也有很多人送上婚礼的祝福,十分感谢! web开发从零学起,记录自己学习过程,各种前端大神们可以绕道不要围观啦 大婚将至 ...
- PC 端微信扫码注册和登录
一.前言 先声明一下,本文所注重点为实现思路,代码及数据库设计主要为了展现思路,如果对代码效率有着苛刻要求的项目切勿照搬. 相信做过微信开发的人授权这块都没少做过,但是一般来说我们更多的是为移动端的网 ...
- 开源社群系统ThinkSNS+PC端最新播报!
亲爱的粉丝,授权客户,企业创业者们,这一次,我们将为你们打造最好用的社交软件系统. 在这里你将看到TSer们本周研发.优化.设计的动态即时播报,可评论留言提出您的问题及建议与我们互动. 同时,研发已经 ...
- J2EE进阶(十八)基于留言板分析SSH工作流程
J2EE进阶(十八)基于留言板分析SSH工作流程 留言板采用SSH(Struts1.2 + Spring3.0 + Hibernate3.0)架构. 工作流程(以用户登录为例): 首先是用 ...
- 山西大同大学教务处教师端——可在PC端,手机端操作
解决问题:大同大学教务处官网教师端口一进去就卡住了,点上面一行的菜单无响应 下载方法(学生端 / 教师端 / 验证脚本): 链接:https://pan.baidu.com/s/1MWrJXoPzE ...
- 山西大同大学教务处学生端--送给学弟,学妹的礼物,可在PC端,手机端操作
解决问题:大同大学教务处官网学生端口一进去就卡住了,点上面一行的菜单无响应 转眼已是四年,想想自己大学即将结束,不由得让人感慨啊.这才刚开学几天,我就听到有同学在因为补考,选课的事情发愁.学校官方的教 ...
随机推荐
- Invalid Subledger (XLA) Packages In Release 12.1.3
In this Document Goal Solution 1.- Information about These Packages 2.- Solution Reference ...
- UnityEditor下文件操作方法汇总(Unity3D开发之二十四)
猴子原创,欢迎转载.转载请注明: 转载自Cocos2Der-CSDN,谢谢! 原文地址: http://blog.csdn.net/cocos2der/article/details/50595585 ...
- Python和shell中Base64编码使用那些事
做开发第一个接触的编码方式就是Base64,当时是用url来传输一些参数,传输的两端会用Base64来编码和解码,保证数据不被url转义破坏. 下面是 维基百科 Base64 中的介绍,其实自己实现起 ...
- rails中weill_paginate的paginate方法中不能使用额外参数的解决办法
我们知道高版本中的rails中的分页功能已经放在will_paginate这个gem中,我们在控制器方法中往往需要调用其paginate方法来实现分页数据集控制,举个例子:正常的情况我们想要每页显示1 ...
- 恶补web之八:jQuery(3)
jquery和其他js框架.jQuery使用$作为jQuery的简写,但是还有很多js框架,比如: MooTools,Backbone,Sammy,Cappuccino,Knockout,JavaSc ...
- ruby正则表带式对象使用备忘
ruby对于正则表达式的使用是非常灵活的,提供了专门的正则表达式对象Regexp.其包括match实例方法,字符串也含有该方法.so可以这么做: /a/ =~ "a" " ...
- Oracle 远程访问配置
服务端配置 如果不想自己写,可以通过 Net Manager 来配置. 以下配置文件中的 localhost 改为 ip 地址,否则,远程不能访问. 1.网络监听配置 # listener.ora N ...
- poi excel 常用操作
基本 Workbook wb= new HSSFWorkbook(); Sheet sheet = wb.createSheet("sheetName"); Row row = s ...
- JS (全局作用域)
一.全局函数作用域(把变量的声明和函数的声明放在前面) 作用域(scope):一条数据可以在哪个范围中使用. 通常来说,一段程序代码中所用到的数据并不总是有效/可用的,而限定这个数据的可用性的代码范围 ...
- Python中的函数与变量
本节内容 函数的定义方法 函数功能 函数的返回值 函数的形参与实参 全局变量与局部变量 递归 函数的作用域 匿名函数lambda 函数式编程 常用内置函数 其他内置函数 函数 函数的定义方法 函数就相 ...