实用的JS代码段(表单篇)
时间:2022-04-22
本文章向大家介绍实用的JS代码段(表单篇),主要内容包括1 多个window.onload方法、2 正则表达式去空格、3 利用正则过滤中文、4 禁止用户的拷贝和复制、5 限制字符串长度(区分中英文)、6 添加CSS函数、7 自适应文本框、8 复选框全选、取消和反选、参考、基本概念、基础应用、原理机制和需要注意的事项等,并结合实例形式分析了其使用技巧,希望通过本文能帮助到大家理解应用这部分内容。
整理了下比较实用的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代码段》
- 分享WordPress显示评论者IP的归属地及运营商信息的2种方案
- 解决dos2unix/unix2dos报错,并在家目录下生成u2dtmp*文件问题
- 【前沿】TensorFlow Pytorch Keras代码实现深度学习大神Hinton NIPS2017 Capsule论文
- Nginx通过二级目录(路径)映射不同的反向代理,规避IP+端口访问
- MySQL中批量初始化数据的对比测试(r12笔记第71天)
- Golang语言--包的概念、导入与可见性
- MySQL中的change,modify和自增列的关系(r12笔记第70天)
- Golang 值得注意的地方
- MySQL数值类型在binlog中需要注意的细节(r12笔记第69天)
- WordPress评论滑动/拉链解锁myQaptcha修改为自动提交的方法
- MySQL root用户登录的几个小问题(r12笔记第67天)
- Java实现生产者消费者的两种方式(r12笔记第66天)
- Golang语言的函数调用信息
- mysqldump的一点使用总结(r12笔记第81天)
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- python 实现语音聊天机器人的示例代码
- Linux应用程序使用写文件调试程序的方法
- python3学生名片管理v2.0版
- 移植新内核到Linux系统上的操作步骤
- PHP实现简单的协程任务调度demo示例
- YII2.0框架行为(Behavior)深入详解
- php数组函数array_push()、array_pop()及array_shift()简单用法示例
- PHP+MySQL+sphinx+scws实现全文检索功能详解
- php封装的page分页类完整实例代码
- Thinkphp自定义生成缩略图尺寸的方法
- Yii框架中使用PHPExcel的方法分析
- 详解python使用pip安装第三方库(工具包)速度慢、超时、失败的解决方案
- Laravel框架自定义分页样式操作示例
- 使用composer 安装 laravel框架的方法图文详解
- laravel5.6 框架操作数据 Eloquent ORM用法示例