jquery实现仿软件输入密钥功能

 jQuery/js   高蒙   阅读(1129)   评论(0)   2016-11-18 09:52:41    jquery 密钥 


需要实现优惠码功能,展现的形式就和一般软件输入密钥一样,有几个输入框可以直接复制粘贴进去,自动的分为每个表单贴入几个字符串。我这里是4个表单,12个字符串。简单说就是每个表单输入3个字符串。如何实现仿软件输入密钥的功能呢?

第一、我们来分析一下实现的思路。

  • 1、监听键盘事件,鼠标粘贴事件。

  • 2、根据输入的字符串做相应的处理,如果粘贴则分别切割,如果三个输入,每3个字符串跳至下一表单。

如图:

20161117155819.jpg

第二、具体实现的代码。

jquery:

// 粘贴事件监控
$.fn.pasteEvents = function (delay) {
if (delay == undefined) delay = 10;
return $(this).each(function () {
    var $el = $(this);
    $el.on("paste", function () {
$el.trigger("prepaste");
setTimeout(function () {
    $el.trigger("postpaste");
}, delay);
    });
});
};
// 清空表单数据 
$(".couponText").on("mousedown",function(){
    $(this).val('');
});
// 输入兑换码 鼠标复制
$(".couponText").on("postpaste", function() {
    var _str = $(this).val();
    $(".text1").val(_str.substr(0,3));
    $(".text2").val(_str.substr(3,3));
    $(".text3").val(_str.substr(6,3));
    $(".text4").val(_str.substr(9,3));
}).pasteEvents();
// 键盘输入
$(".couponText").on("keyup",function(){
    var _val = $(this).val();
    if(_val.length>3){
        $(this).val(_val.substr(0,3));
    }
    var _index = $(this).index();
    var _len = _val.length;
    if(_index < 4 && _len>=3){
        $(".couponText").eq(_index+1).focus();
    }
});

html:

<input type="text" name="" class="couponText text text1" onkeyup="value=value.replace(/[^\w\.\/]/g,'')">
<input type="text" name="" class="couponText text text2" onkeyup="value=value.replace(/[^\w\.\/]/g,'')">
<input type="text" name="" class="couponText text text3" onkeyup="value=value.replace(/[^\w\.\/]/g,'')">
<input type="text" name="" class="couponText text text4" onkeyup="value=value.replace(/[^\w\.\/]/g,'')">


按照上面的步骤,可以很轻松的实现jquery仿软件输入密钥功能的开发。





相关文章



我要评论


站长昵称:(*)

输入内容:


评论列表


高蒙

男,程序猿一枚

 

人生要是没有理想, 那跟一条咸鱼有什么分别。


关于我

  http://www.shuchengxian.com

高蒙个人博客是以PHP技术为主的程序员个人博客。博客主要发布php开发中遇到的问题以及解决办法,同时个人博客也分享网站模板素材,jquery插件等方面素材。


站点声明:相关侵权、举报、投诉及建议等,请发E-mail:936594075#qq.com(#替换成@)。

Copyright © 2018, www.shuchengxian.com, All rights reserved. 个人博客皖公网安备 34152302000022号 皖ICP备15015490号

关键词:个人博客,PHP博客,PHP博客程序,高蒙博客,高蒙个人博客,php程序员博客,程序员个人博客