HTML中input标签maxlength属性的妙处
HTML中的input标签可是很常用的。
HTML本身也非常简单,就是若干标签,每个标签有若干属性。
我在学习HTML的过程中,也没有太过重视。
今年,在写前端表单验证的时候,发现maxlength这个属性很好用。
实际需求
前端的表单,需要进行验证。
结合JS表单验证框架,写了很多前端验证的代码。
其中,有这么一个需求:用户最多只能输入10个字符。
按照惯性,肯定是会去写JS表单验证了。
实际上,根本没有必要。
HTML中的maxlength属性就可以很简单地解决这个问题。
<input type="text" size="10" maxlength="10" />
通过这个很简单的属性设置,用户能够输入的字符就是10。前端,根本不需要再去验证。
观点结论
这个属性很简单,但是可以节省不少时间。
这个实际案例提醒我们,不要被自己的习惯误导了。
很多问题存在着简单的解决方法,不要把简单的问题用复杂的方法解决了。
切记!
原文链接:http://blog.fansunion.cn/articles/3509(小雷博客-blog.fansunion.cn)
HTML中input标签maxlength属性的妙处的更多相关文章
- html <input>标签类型属性type(file、text、radio、hidden等)详细介绍
html <input>标签类型属性type(file.text.radio.hidden等)详细介绍 转载请注明:文章转载自:[169IT-最新最全的IT资讯] html <inp ...
- Spring中bean标签的属性和值:
Spring中bean标签的属性和值: <bean name="user" class="com.pojo.User" init-method=" ...
- 关于django中input标签中file类型以及开路由
0825自我总结 关于django中input标签中file类型 1.input提交图片实时展示 <img src="/static/img/default.png" wid ...
- Html中input标签的使用
1.取消按钮按下时的虚线框 在input里添加属性值 hideFocus 或者 HideFocus=true 2.只读文本框内容 在input里添加属性值 readonly 3.防止退后清空的TEXT ...
- 解决input标签placeholder属性浏览器兼容性问题的一种方法
为文本框input添加文字输入提示,H5为input提供了一个placeholder属性.在支持H5的浏览器中,用此属性设置输入提示,简单方便,但是对于IE8以下版本,都不支持placeholder属 ...
- 关于input标签checkbox属性 和checked
我们设置了type的属性为checkbox时,记住以下3个关键点 1.点勾选时或者说点击时,checked为选中,在input标签中是checked=“checked”,注意这里面无论checked= ...
- html5中 input的pattern属性 和 details/summary元素
html5--3.21 课程小结与其他新增元素 一.总结 一句话总结: input的pattern属性可以设置正则验证,比如检测学号的位数和数字区间 details/summary元素配合起来可以做元 ...
- html中各种标签和属性(最基础的基本都有)
1.标题标签: h1~h6 ctrl+1~6 2.段落标签: p ctrl+shift+p 3.换行标签: br shift+回车 4.水平线: hr 5.加粗标签: stro ...
- 前端 html input标签 placeholder属性 标签上显示内容
前端 html input标签 的placeholder属性 标签上显示内容 <!DOCTYPE html> <html lang="en"> < ...
随机推荐
- linux sed命令详解 --大量举例
1. Sed简介 sed 是一种在线编辑器,它一次处理一行内容.处理时,把当前处理的行存储在临时缓冲区中,称为“模式空间”(pattern space),接着用sed命令处理缓冲区中的内容,处理完成后 ...
- MVC异常过滤器
MVC过滤器 一般的过滤器执行顺序 IAuthorizationFilter->OnAuthorization(授权) IActionFilter ->OnActionE ...
- tensorflow学习之路-----卷积神经网络个人总结
卷积神经网络大总结(个人理解) 神经网络 1.概念:从功能他们模仿真实数据 2.结构:输入层.隐藏层.输出层.其中隐藏层要有的参数:权重.偏置.激励函数.过拟合 3.功能:能通过模仿,从而学到事件 其 ...
- Idea下mybatis的错误—Module not specified
IDEA下使用maven的mybatis常见错误 错误类型一:导入项目引起的错误Module not specified 错误提示:idea Error Module not specified. 错 ...
- 安卓https
http://www.tuicool.com/articles/NrmE3e http://blog.csdn.net/guestcode/article/details/50194357 http: ...
- HDU——T 3072 Intelligence System
http://acm.hdu.edu.cn/showproblem.php?pid=3072 Time Limit: 2000/1000 MS (Java/Others) Memory Limi ...
- JavaScript定时调用函数(SetInterval与setTimeout)
setTimeout和setInterval的语法同样.它们都有两个參数.一个是将要运行的代码字符串.另一个是以毫秒为单位的时间间隔,当过了那个时间段之后就将运行那段代码. 只是这两个函数还是有差别的 ...
- Android 经常使用的adb命令
1.安装APK(假设加 -r 參数,保留已设定数据.又一次安装filename.apk) adb install xxx.apk adb install -r xxx.apk 2.卸载APK(假设加 ...
- UDP连接调用connect()函数
UDP是一个无连接的协议,它没有像TCP中EOF之类的东西. 8.11 UDP的connect函数 除非套接字已连接,否则异步错误是不会反悔到UDP套接字的. 我们确实能够给UDP套接字调用conne ...
- php输出杨辉三角
php输出杨辉三角 一.截图 二.代码 <!DOCTYPE html> <html lang="en"> <head> <meta cha ...