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"> < ...
随机推荐
- [Chromium文档转载,第004章]Mojo Synchronous Calls
For Developers > Design Documents > Mojo > Synchronous Calls Think carefully before ...
- ES6学习笔记(五)函数的扩展
1.函数参数的默认值 1.1基本用法 ES6 之前,不能直接为函数的参数指定默认值,只能采用变通的方法. function log(x, y) { y = y || 'World'; console. ...
- php自定义加密和解密
<?php function _authcode($string, $operation = 'DECODE', $expiry = 0) { $key = 'c5s1t6o'; $cke ...
- 在idea 中使用try catch
ctrl+alt + t 选中代码,按快捷键可直接try catch 此段代码
- POJ——T 3067 Japan
http://poj.org/problem?id=3067 Time Limit: 1000MS Memory Limit: 65536K Total Submissions: 29474 ...
- C++虚表的原理,很好
下面这篇文章讲的很好. http://www.cnblogs.com/lihaosky/articles/1606502.html 假设我们有这样的一个类: class Base { public: ...
- 记真实自己,炫精彩人生---《爱记》app使用体验
真的有款神器吗,能找到合适的Ta,能秀出自己的新生活,能让自己的心情舒爽,有,体验了下.就是爱记.果粉的福利. [爱记]是集心情记录.分享.评价与交流于一体的工具,TA是你心灵休憩的港湾,也是你记忆放 ...
- mysql_jdbc
package com.lovo.day18_jdbc1; import java.sql.Connection; import java.sql.DriverManager; import java ...
- uva103 - Stacking Boxes(DAG)
题目:uva103 - Stacking Boxes(DAG) 题目大意:给出N个boxes, 而且给出这些箱子的维度.要求找一个最长的序列.可以使得以下的箱子一定可以有个维度序列大于上面的那个箱子的 ...
- js---05 自定义属性
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content ...