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"> < ...
随机推荐
- AtCoder Beginner Contest 067 C - Splitting Pi
C - Splitting Pile Time limit : 2sec / Memory limit : 256MB Score : 300 points Problem Statement Snu ...
- Windows10上使用windbg调试Chromium Windows。
###目的###Windows10上使用windbg调试Chromium Windows. 安装Windows 10 SDK时, 就包含了windbg.exe."C:\Program Fil ...
- MYSQL查询数据中通讯最多的两个人
SELECT GREATEST( sender_id, recipient_id ) , LEAST( sender_id, recipient_id ) , COUNT( * ) AS aFROM ...
- 【Uva 1629】 Cake slicing
[Link]: [Description] 给你一个n*m的格子; 然后里面零零散散地放着葡萄 让你把它切成若干个小矩形方格 使得每个小矩形方格都恰好包含有一个葡萄. 要求切的长度最短; 问最短的切割 ...
- Mysql学习总结(11)——MySql存储过程与函数
摘要:存储过程和函数是在数据库中定义一些SQL语句的集合,然后直接调用这些存储过程和函数来执行已经定义好的SQL语句.存储过程和函数可以避免开发人员重复的编写相同的SQL语句.而且,存储过程和函数是在 ...
- sqoop 1.4.4-cdh5.1.2高速入门
一.高速入门 (一)下载安装 1.下载并解压 wget http://archive.cloudera.com/cdh5/cdh/5/sqoop-1.4.4-cdh5.1.2.tar.gz tar - ...
- jquery2.0.3 全部源码
/*! * Includes Sizzle.js 选择器,独立的库 * http://sizzlejs.com/ */ (function( window, undefined ) { //" ...
- 71.lambda表达式的递归
#include <iostream> #include <functional> using namespace std; void main() { //&调用外部 ...
- Linux LiveCD 诞生记
Linux LiveCD 诞生记 650) this.width=650;" onclick='window.open("http://blog.51cto.com/viewpic ...
- HDU 4699 Editor 维护栈
维护两个栈,分别存光标前和光标后的数 再维护前缀和的栈 和 前缀和最大值的栈 注意一下左移,右移,删除到顶了就不操作了 5个操作 I x : 光标处插入x -----> s1.push(x) ...