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的效果如下: 点击我 ...
随机推荐
- 进入BIOS的步骤
查看自己的BIOS版本 $ systeminfo 对号入座,电脑进入BIOS的两种实用方法
- .NET接收邮件下载邮件附件——openpop.net
使用OpenPop.Net接收邮件很方便,下面是接收下载邮件附件的代码 OpenPop.Net下载地址 https://sourceforge.net/projects/hpop/ public cl ...
- 百度Echart 地图
使用百度地图做一个全国地图数据分析的功能,如下图 代码 <%@ Page Language="C#" AutoEventWireup="true" Cod ...
- 信息检索和自然语言处理 IR&NLP howto
课程: 6.891 (Fall 2003): Machine Learning Approaches for Natural Language Processing http://www.ai.mit ...
- 本地git的使用
git和svn的解析 git 教程 git rebase的用法 attion: one: git中是严格区分大小写的,文件名字大小写敏感 two: git中分为:工作区,暂存区,分支 three: ...
- maya 安装失败
AUTODESK系列软件着实令人头疼,安装失败之后不能完全卸载!!!(比如maya,cad,3dsmax等).有时手动删除注册表重装之后还是会出现各种问题,每个版本的C++Runtime和.NET f ...
- jenkins自动打IOS包(转发)
投稿文章,作者:一缕殇流化隐半边冰霜(@halfrost) 前言 众所周知,现在App的竞争已经到了用户体验为王,质量为上的白热化阶段.用户们都是很挑剔的.如果一个公司的推广团队好不容易砸了重金推广了 ...
- poj1092. To Buy or Not to Buy (20)
1092. To Buy or Not to Buy (20) 时间限制 100 ms 内存限制 65536 kB 代码长度限制 16000 B 判题程序 Standard 作者 CHEN, Yue ...
- hibernate课程 初探一对多映射1-1 课程简介
hibernate 常见映射类型 one-to-many many-to-one one-to-one many-to-many
- iOS实现头像选取(照相或者图片库)、大小等比缩放、生成圆形头像
//弹出actionsheet.选择获取头像的方式 //从相册获取图片 -(void)takePictureClick:(UIButton *)sender { // /*注:使用,需要实现以下协议: ...