js 实现序列号效果实现
前端的朋友可能遇到过这样的需求,要求在页面输入一串序列号,或激活码(就像在PC正版软件中的序列号),可是HTML中并没有为我们提供类似的组件,我们来自己实现一个:
大体的思路是在表单里有一个隐藏的input,而表面上用一组input代替:
<form name="" action="" method="post">
<p>
<label>请输入激活码:</label>
<span class="act-code-group">
<input id="act-code-item-1" name="act-code-item-1" class="act-code-item" type="text" /> -
<input name="act-code-item-2" class="act-code-item" type="text" /> -
<input name="act-code-item-3" class="act-code-item" type="text" /> -
<input name="act-code-item-4" class="act-code-item" type="text" />
</span>
<input class="act-code-hidden" type="hidden" value="" />
</p>
至于式样上的东西就留给大家,自己发挥吧!
然后我们来处理一下相关逻辑:
function initActCodeGroup(dom){
var $ = jQuery;
var actCodeGroup = dom,
actCodeItem = actCodeGroup.find('.act-code-item');
var ctrlPress = false;
//actCodeItem.attr('maxlength', '5');
actCodeItem.keyup(function(e){
var oldVal = $(this).val();
if(e.keyCode === 8){
// backspace
if(oldVal.length <= 0){
$(this).prev().focus();
}
}else if(e.keyCode === 86 && ctrlPress){
//ctrl + v
var parseTxt = $(this).val(),
parseTxtLen = parseTxt.length; ctrlPress = false; var actCodes = [];
if(parseTxt.indexOf('-') >= 0){
actCodes = parseTxt.split('-');
}else{
if(parseTxtLen >= 4){
actCodes.push(parseTxt.substr(0, 4));
}else{
actCodes.push(parseTxt.substr(0, parseTxtLen));
}
if(parseTxtLen >= 8){
actCodes.push(parseTxt.substr(4, 4));
}else{
actCodes.push(parseTxt.substr(4, parseTxtLen-4));
}
if(parseTxtLen >= 12){
actCodes.push(parseTxt.substr(8, 4));
}else{
actCodes.push(parseTxt.substr(8, parseTxtLen-8));
}
if(parseTxtLen >= 16){
actCodes.push(parseTxt.substr(12, 4));
}else{
actCodes.push(parseTxt.substr(12, parseTxtLen-12));
}
} if(actCodes.length > 1){
var curInput = $(this);
$.each(actCodes, function(i, v){
if(curInput && v.length <= 4){
curInput.val(v);
curInput = curInput.next();
}else{
return false;
}
});
} }else if(e.keyCode === 17){
setTimeout(function(){
ctrlPress = false;
}, 1000);
}else{
if(oldVal.length >= 4){
$(this).val(oldVal.substr(0,4));
if($(this).next().length > 0){
$(this).next().focus();
}
}
}
}).keydown(function(e){
if(e.keyCode === 17){
ctrlPress = true;
}
});
}
这样就实现了4*4的序列号组件,接下来调用这个初始化函数就好了
$(document).ready(function(){
initActCodeGroup($('.act-code-group'));
});
打开浏览器看看我们的序列号组件吧!
js 实现序列号效果实现的更多相关文章
- React.js实现原生js拖拽效果及思考
一.起因&思路 不知不觉,已经好几天没写博客了...近来除了研究React,还做了公司官网... 一直想写一个原生js拖拽效果,又加上近来学react学得比较嗨.所以就用react来实现这个拖 ...
- 用js实现动画效果核心方式
为了做好导航菜单,有时候需要在菜单下拉的时候实现动画效果,所以这几天就研究了研究如何用js实现动画效果,实现动画核心要用到两个函数,一个是setTimeOut,另一个是setInterval. 下边我 ...
- js拖拽效果
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 原生JS实现分页效果2.0(新增了上一页和下一页,添加当前元素样式)
虽然写的很烂,但至少全部都是自己写的,因为这个没有固定的顺序,所以就没有封装,如果你技术好的话,可以你写的分享给我,谢谢. <!DOCTYPE html><html lang=&qu ...
- 原生JS实现分页效果1.0
不太完整,写的太急,等等加上完整注释,写起来还是有些难度的,写的有点水,后面再改进改进. <!DOCTYPE html><html lang="en">&l ...
- 使用JS实现手风琴效果
想要实现简单的手风琴切换效果,需要使用JS实现,如下是使用javascript源码实现,后续会更新使用jQuery实现. 1. 先进行简单的布局:我们可以再ul下添加几个li实现html的简单布局,再 ...
- js弹窗登录效果(源码)--web前端
1.JS弹窗登录效果 <!DOCTYPE html><html lang="en"><head> <meta charset=" ...
- 原生JS实现弹幕效果
纯属无聊写的,可能有很多问题,欢迎批评指教. 效果图:图一是预设的一些弹幕,图二是自己发射的弹幕,效果是一样的. 首先是弹幕的位置,是要从最右滑到最左,为了防止随机高度弹幕会覆盖的问题,设置了通道 ...
- JS添加标签效果
JS添加标签效果 在豆瓣网上添加自己的标签是一种常见的效果,今天也就做了一个简单的demo.由于时间的问题 我不多原理,大家可以试着操作几遍就能明白其中的原理了. JSFiddle的效果如下: 点击我 ...
随机推荐
- SQL---MySQL数据库---聚合函数
1.数值 format(x,n) 将x格式化为 由逗号分隔,小数点后n 位的数:
- typescript的lambads解决this关键字找不到属性
var people = { name: ["abc", "jack", "pepter", "jim"], getna ...
- mysql-proxy读写分离,负载均衡
配置mysql-proxy,创建主配置文件 cd /usr/local/mysql-proxy mkdir lua #创建脚本存放目录 mkdir logs #创建日志目录 cp share/doc/ ...
- SSRS 参数 单选 多选
前段时间 公司要求报表的选项可以多选. 知道需求后,研究了下实现. 首先我们创建一个报表,然后添加3个数据集,2个参数,如下图. DataSet1数据集:存放主数据. ddl_emplid数据集:存放 ...
- 关于hibernate字段映射@colunm出现的问题以及jpa驼峰大写转_小写的问题探究
关于hibernate字段映射@colunm出现的问题以及jpa驼峰大写转_小写的问题探究2018年04月24日 15:47:26 守望dfdfdf 阅读数:735 标签: @colunmhibern ...
- iOS重用宏定义
iOS 多快好省的宏(转) 原文地址:http://my.oschina.net/yongbin45/blog/150149 // 字符串: #ifndef nilToEmpty #define ni ...
- spoon kettle连接数据库失败解决方法
Driver class 'oracle.jdbc.driver.OracleDriver' could not be found, make sure the 'Oracle' driver (ja ...
- PagerAdapter相关
FragmentPagerAdapter 特点: 应用于少数的(10个以下)fragment:保存在内存中: 只需实现 getItemgetCount()两个方法 FragmentStatePager ...
- Android Studio快捷键【Android学习入门】
Studio快捷键[Android学习入门]" title="Android Studio快捷键[Android学习入门]"> 提示 Ctrl+P方法参数提示 Ct ...
- 【工作】Proxy Server的优化 - 检测目标网站URL变化
在工作中,我在组里负责一个Proxy(代理)的Module,这个Module是针对微软的Office 365的邮件门户OWA实现,工作起来后,用户访问Office 365 OWA,无需再输入Offic ...