整理了下比较实用的Javascript代码段,完整的代码参考

1 多个window.onload方法

  由于onload方法时在页面加载完成后,自动调用的。因此被广泛的使用,但是弊端是只能实用onload执行一个方法。下面代码段,可以保证多个方法在Onload时执行:

    function addLoadEvent(func){
var oldonload = window.onload;
if(typeof window.onload != 'function'){
window.onload = func;
}else{
window.onload = function(){
oldonload();
func();
}
}
}

2 正则表达式去空格

str.replace(/^(\s|\u00A0)+|(\s|\u00A0)+$/g,"");

3 利用正则过滤中文

str.replace(/[\u4e00-\u9fa5]/g,"");

4 禁止用户的拷贝和复制

xxx.oncopy = function(){
return false;
}
xxx.onpaste = function(){
return false;
}

5 限制字符串长度(区分中英文)

  主要思想:

  需要3个数据:1 限制输入的长度;2 已经输入了多长; 3 截取多少个字符;

  由于JS里面的截取方法不区分中英文 ,因此

  “哈哈哈”.substr(0,2) ----> 哈哈

  “haha”.substr(0,2) ---> ha

  但是,如果按照编码一个汉字应该对应2个字符,一个字母对应一个字符。

  因此统计 真实长度 时,应该是 字符的长度 + 汉字的个数

  例如我们限制输入5个字符:那么输入“哈哈”后,就只能输入一个h,不能再输入汉字了。代码参考如下,可以运行一下推敲推敲。

    <script type="text/javascript">
var strLen = (function(){//strlLength的功能相同,但是写法巨麻烦
return function(_str,_model){
_model = _model || "Ch"; //En模式下,中文算作1字符;Ch模式下,中文为2个字符
var _strLen = _str.length; //获取字符串长度
if(_strLen == 0){
return 0;
}else{
var chinese = _str.match(/[\u4e00-\u9fa5]/g); //匹配中文
return _strLen + (chinese && _model == "Ch"?chinese.length:0); //为什么要&&?
}
}
})();
var strLength = function(_str,_model){
_model = _model || "Ch"; //En模式下,中文算作1字符;Ch模式下,中文为2个字符
var _strLen = _str.length; //获取字符串长度
if(_strLen == 0){
return 0;
}else{
var chinese = _str.match(/[\u4e00-\u9fa5]/g); //匹配中文
return _strLen + (chinese && _model == "Ch"?chinese.length:0); //为什么要&&?
}
}
var funcRemainingCharacters = function(){
remainingCharacters = document.getElementById("remainingCharacters");
var clearRemainingCharacters = function(_this){
var _value = _this.value;
var _valueLength = _value.length;
var dataLength = _this.getAttribute("data-length");
var dataModel = _this.getAttribute("data-model");
var subLen = dataLength;
if(dataModel == "Ch"){//仅当开启Ch后,才对重新计算截取的长度
_valueLength = strLength(_value,dataModel);
var vv = _value.match(/[\u4e00-\u9fa5]/g); //当输入【哈哈】时,vv是["哈","哈"]数组
subLen = dataLength - (!vv?0:vv.length);
}
//_valueLength代表总共的字符长度,比如哈哈哈 为 6
//dataLength是我们定义的限制长度,比如 5
//subLen是计算的截取长度,当输入家具啊
if(_valueLength > dataLength){
_this.value = _value.substr(0,subLen);
}
}
remainingCharacters.onfocus = function(){
clearRemainingCharacters(this);
}
remainingCharacters.onkeyup = function(){
clearRemainingCharacters(this);
}
remainingCharacters.onblur = function(){
clearRemainingCharacters(this);
}
}
addLoadEvent(funcRemainingCharacters);
</script>

  全部代码

<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<script type="text/javascript">
function addLoadEvent(func){
var oldonload = window.onload;
if(typeof window.onload != 'function'){
window.onload = func;
}else{
window.onload = function(){
oldonload();
func();
}
}
}
</script>
</head>
<body>
<p class="h3">(支持中英文区分)限制字符串长度</p>
<div class="container">
<div class="row">
<div class="col-md-4">
<input type="text" class="form-control" data-length="5" id="remainingCharacters" data-model="Ch">
</div>
</div>
</div> <script type="text/javascript">
var strLen = (function(){//strlLength的功能相同,但是写法巨麻烦
return function(_str,_model){
_model = _model || "Ch"; //En模式下,中文算作1字符;Ch模式下,中文为2个字符
var _strLen = _str.length; //获取字符串长度
if(_strLen == 0){
return 0;
}else{
var chinese = _str.match(/[\u4e00-\u9fa5]/g); //匹配中文
return _strLen + (chinese && _model == "Ch"?chinese.length:0); //为什么要&&?
}
}
})();
var strLength = function(_str,_model){
_model = _model || "Ch"; //En模式下,中文算作1字符;Ch模式下,中文为2个字符
var _strLen = _str.length; //获取字符串长度
if(_strLen == 0){
return 0;
}else{
var chinese = _str.match(/[\u4e00-\u9fa5]/g); //匹配中文
return _strLen + (chinese && _model == "Ch"?chinese.length:0); //为什么要&&?
}
}
var funcRemainingCharacters = function(){
remainingCharacters = document.getElementById("remainingCharacters");
var clearRemainingCharacters = function(_this){
var _value = _this.value;
var _valueLength = _value.length;
var dataLength = _this.getAttribute("data-length");
var dataModel = _this.getAttribute("data-model");
var subLen = dataLength;
if(dataModel == "Ch"){//仅当开启Ch后,才对重新计算截取的长度
_valueLength = strLength(_value,dataModel);
var vv = _value.match(/[\u4e00-\u9fa5]/g); //当输入【哈哈】时,vv是["哈","哈"]数组
subLen = dataLength - (!vv?0:vv.length);
}
//_valueLength代表总共的字符长度,比如哈哈哈 为 6
//dataLength是我们定义的限制长度,比如 5
//subLen是计算的截取长度,当输入家具啊
if(_valueLength > dataLength){
_this.value = _value.substr(0,subLen);
}
}
remainingCharacters.onfocus = function(){
clearRemainingCharacters(this);
}
remainingCharacters.onkeyup = function(){
clearRemainingCharacters(this);
}
remainingCharacters.onblur = function(){
clearRemainingCharacters(this);
}
}
addLoadEvent(funcRemainingCharacters);
</script>
<hr>
<!-- **************************************************************************** -->
</script>
</body>
</html>

6 添加CSS函数

var setCSS = function(_this,cssOption){
if(!_this || _this.nodeType === 3 || _this.nodeType === 8 || !_this.style){
return;
}
for(var cs in cssOption){
_this.style[cs] = cssOption[cs];
}
return _this;
};

  使用时

setCSS(xxx,{
"position":"relative",
"top":"0px"
});

7 自适应文本框

  采用scrollHeight复制给style.height

xxx.style.overflowY = "hidden";
xxx.onkeyup = function(){
xxx.style.height = xxx.scrollHeight+"px";
};

8 复选框全选、取消和反选

//下面html代码
<label class="checkbox-inline">
<input type="checkbox" name="actionSelects">读书
</label>
<label class="checkbox-inline">
<input type="checkbox" name="actionSelects">跑步
</label>
<label class="checkbox-inline">
<input type="checkbox" name="actionSelects">游戏
</label>
<label class="checkbox-inline">
<input type="checkbox" name="actionSelects">游泳
</label>
//下面是js代码
var targets = document.getElementsByName("actionSelects");
var targetsLen = targets.length;
var i = 0;
document.getElementById("allSelect").onclick = function(){
for(i=0;i<targetsLen;i++){
targets[i].checked = true;
}
} document.getElementById("cancelAllSelect").onclick = function(){
for(i=0;i<targetsLen;i++){
targets[i].checked = false;
}
}
document.getElementById("_select").onclick = function(){
for(i=0;i<targetsLen;i++){
targets[i].checked = !targets[i].checked;
}
}

参考

【1】《超实用的JavaScript代码段》

实用的JS代码段(表单篇)的更多相关文章

  1. 50个实用的jQuery代码段让你成为更好的Web前端工程师

    本文会给你们展示50个jquery代码片段,这些代码能够给你的javascript项目提供帮助.其中的一些代码段是从jQuery1.4.2才开始支持的做法,另一些则是真正有用的函数或方法,他们能够帮助 ...

  2. 《超实用的Node.js代码段》连载三:Node.js深受欢迎的六大原因

    <超实用的Node.js代码段>连载一:获取Buffer对象字节长度 <超实用的Node.js代码段>连载二:正确拼接Buffer Node.js是一种后起的优秀服务器编程语言 ...

  3. 我们为什么要看《超实用的Node.JS代码段》

    不知道自己Node.JS水平如何?看这张图 如果一半以上的你都不会,必须看这本书,一线工程师用代码和功能页面来告诉你每一个技巧点. 都会一点,但不知道如何检验自己,看看本书提供的面试题: 1.     ...

  4. 【摸鱼神器】UI库秒变低代码工具——表单篇(一)设计

    前面说了列表的低代码化的方法,本篇介绍一下表单的低代码化. 内容摘要 需求分析. 定义 interface. 定义表单控件的 props. 定义 json 文件. 基于 el-form 封装,实现依赖 ...

  5. 超实用 JS 代码段笔记(一)

    序1:30段简单代码段(有删减) 1 . 区分 IE 和 非 IE 浏览器 if(!+[1,]){ console.log('ie浏览器'); }else{ console.log('非ie浏览器') ...

  6. 验证表单的js代码段

     JS常用功能 转载自:http://blog.csdn.net/kalision/article/details/12516103 引用js文件: <script src="js/d ...

  7. 《超实用的Node.js代码段》连载二:正确拼接Buffer

    对于初学Node.js框架的开发人员来说,可能认为Buffer模块比较易学.重要性也不是那么突出.其实,Buffer模块在文件I/O和网络I/O中应用非常广泛,其处理二进制的性能比普通字符串性能要高出 ...

  8. 50个实用的jq代码段整理

    个人博客: http://mcchen.club   1. 如何创建嵌套的过滤器:   //允许你减少集合中的匹配元素的过滤器,   //只剩下那些与给定的选择器匹配的部分.在这种情况下,   //查 ...

  9. 【摸鱼神器】UI库秒变低代码工具——表单篇(二)子控件

    上一篇介绍了表单控件,这一篇介绍一下表单里面的各种子控件的封装方式. 主要内容 需求分析 子控件的分类 子控件属性的分类 定义 interface. 定义子控件的的 props. 定义 json 文件 ...

随机推荐

  1. Begin to record my bologs....

    after work for almost two years, I have realize the truth notes can help a lot for us. avoiding my l ...

  2. C中signed与unsigned

    unsigned ; cout<<i * -; 问结果是多少. 第一反应:-3.不过结果似乎不是这样的,写了个程序,运行了一下,发现是:4294967293. 1)在32位机上,int型和 ...

  3. [转]ActionScript 3.0入门:Hello World、文件读写、数据存储(SharedObject)、与JS互调

    本文转自:http://www.cnblogs.com/artwl/p/3396330.html 近期项目中可能要用到Flash存取数据,并与JS互调,所以就看了一下ActionScript 3.0, ...

  4. hdu1042 N!

    /* N! Time Limit: 10000/5000 MS (Java/Others) Memory Limit: 262144/262144 K (Java/Others) Total Subm ...

  5. 合工大 OJ 1332 蛇形阵

    Description 蛇形针回字阵: 如3*3: 回字阵: 7 6 5 8 1 4 9 2 3 Input 多组数据: 每一行一个正整数n(n为奇数,<26),代表n*n矩阵. Output ...

  6. bzoj-3444 3444: 最后的晚餐(组合数学)

    题目链接: 3444: 最后的晚餐 Time Limit: 5 Sec  Memory Limit: 128 MB Description [问题背景] 高三的学长们就要离开学校,各奔东西了.某班n人 ...

  7. JS实现图片上传预览效果:方法一

    <script type="text/javascript"> //处理file input加载的图片文件 $(document).ready(function(e) ...

  8. RabbitMQ 一二事(2) - 工作队列使用

    上篇文章讲了简单队列的使用,这其实就是RMQ给的demo,实际并没有什么用 本篇讲讲工作模式队列,也称之为任务队列 一个生产者发布了多条消息,消费者A可以接受消息,接受消息后该消息就消除,消费者B可以 ...

  9. Sql助手

    1. Visual Studio .net 的智能感知非常好用,但是在Sql Server中却没有.安装了这个小软件,就可以使用智能感知了. 此软件适用于主流的的数据库,如:Sql Server,DB ...

  10. 【markdown】markdown常用语法

    标题 用1~6个# 标题1 标题2 标题3 标题4 标题5 标题6 源码: # 标题1 ## 标题2 ### 标题3 #### 标题4 ##### 标题5 ###### 标题6 引用 引用使用 引用使 ...