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"> < ...
随机推荐
- 外部数据库驱动程序XX中的意外错误
链接EXCEL打开报错 代码如下(Excel2003版本)出现这种错误 现在只需要更改 修改成 并且把导入版本修改
- ES6学习笔记(十)代理器Proxy
Java可以使用面向切面(AOP)的方法来实现某些统一的操作,比如某个操作的前置通知,后置通知等等,这种操作非常方便,其本质便是动态代理,JS的代理Proxy代理该如何使用呢? 某位大神的实现如下: ...
- 【RHEL7/CentOS7网络配置】
目录 网卡配置文件 查网卡信息 测试网络是否正常 使用 nmtui 命令配置网络 使用 nm-connection-editor 工具配置网络 修改回6.x版本的网卡名 Rhel/CentOS网络配置 ...
- 【Codeforces Round #424 (Div. 2) C】Jury Marks
[Link]:http://codeforces.com/contest/831/problem/C [Description] 有一个人参加一个比赛; 他一开始有一个初始分数x; 有k个评委要依次对 ...
- 为线程绑定CPU
// learn gcc atomic variable #define _GNU_SOURCE #include <stdio.h> #include <stdlib.h> ...
- Json技术
JSON语法是一种用于传输和生成数据的协定,很类似于C家族的语言,所以很容易被C家族的语言所解析.对象:对象包含再{}之间属性:采用Key-Value对来表示.属性之间使用逗号分开. string ...
- POJ 1474 Video Surveillance 半平面交/多边形核是否存在
http://poj.org/problem?id=1474 解法同POJ 1279 A一送一 缺点是还是O(n^2) ...nlogn的过几天补上... /********************* ...
- lunix 命令积累
.修改文件的拥有者 chown 用户:用户 文件 .切换账号 su 账号 . 追踪路由信息 traceroute 主机名
- double 失真例子
public static void main(String[] args) { // TODO Auto-generated method stub double ab=821.20; dou ...
- 团队作业-Beta冲刺(2)
这个作业属于哪个课程 https://edu.cnblogs.com/campus/xnsy/SoftwareEngineeringClass2 这个作业要求在哪里 https://edu.cnblo ...