• 最近接的新项目,登录注册页根据需求要使用手机号获取验证码登录或者注册,一开始的想法是要做4个inputshur输入框,但是光标问题太严重。 在网上看别人的实现方法,发现可以用一个input+4个span或者四个div来做,...

    最近接的新项目,登录注册页根据需求要使用手机号获取验证码登录或者注册,一开始的想法是要做4个inputshur输入框,但是光标问题太严重。

    在网上看别人的实现方法,发现可以用一个input+4个span或者四个div来做,经过构思,实现了以下的方法。

     

    html:

    <div id="shoujihao">
                        <span></span>
                        <button class="daojishibtn" type="button">点击获取</button>
                        <!--验证码输入框-->
                        <div class="container" id="test">
                            <div class="val-box" id="val-box">
                             <input id="val-code-input" type="text" maxlength="4" οnkeyup="checkForNum(this)"  onselectstart="return false;" οnblur="checkForNum(this)" />
                                <div name="val-item"></div>
                                <div name="val-item"></div>
                                <div name="val-item"></div>
                                <div name="val-item"></div>
                            </div>
                        </div>
                        
                    </div>

    css: 

    .container {
        position: absolute;
        bottom: 30px;
        padding: 10px;
        text-align: center;
    }
    .container p{
        font-family: "微软雅黑";
        color: #888;
    }
    .val-box {
        display: inline-block;
        height: 40px;
        width: 216px;
        text-align: center;
        position: relative;
        background: #FFFFFF;
        -webkit-tap-highlight-color: transparent;
    }

    .val-box input[type=text] {
        position: absolute;
        left: 0;
        top: 0;
        height: 34px;
        width: 212px;
        opacity: 0.9;
        z-index: -999;
        outline: none;
        margin-left: 1000px;
        -webkit-tap-highlight-color: transparent;
    }

    .val-box div {
        height: 38px;
        width: 22%;
        border: 1px solid #DDD;
        border-radius: 5px;
        float: left;
        margin: 2px 3px;
        z-index: 5;
        font-size: 1.5em;
        font-family: arial;
        /*font-weight: 530;*/
        text-align: center;
        line-height: 1.5em;
        cursor: text;
        /*padding-bottom: 10px;*/
    }
    .val-box .available {
        border-color: #0081db;
    }

    /*.val-box .availabla:after {
        /*伪类实现光标效果*/
        content: ' ';
        display: inline-block;
        height: 90%;
        width: 1px;
        background: #313131;
        animation: .8s animate infinite;
    }*/

    js:

    //            四格验证码
                $(function(){
                    var valCodeInput = $("#val-code-input");
                    var valCodeItems = $("div[name='val-item']");
                    var regex = /^[\d]+$/;
                    var valCodeLength = 0;
                    $('#val-box').on('click',function(){
                        valCodeInput.focus();
                    })
    //              input输入框即时反映
                    valCodeInput.on('input propertychange change', function(e){
                        valCodeLength = valCodeInput.val().length;
                        if(valCodeInput.val() && regex.test(valCodeInput.val())) {
                            $(valCodeItems[valCodeLength - 1]).removeClass('available');
                            $(valCodeItems[valCodeLength - 1]).addClass('available');
                            $(valCodeItems[valCodeLength - 1]).text(valCodeInput.val().substring(valCodeLength - 1, valCodeLength));
                        }
                    })
    //              点击获取验证码或点击第一个数字输入框时获取焦点,添加available类样式
                    $(".daojishibtn,div[name='val-item']").on("tap",function(){
                        $(valCodeInput).focus();
                        $(valCodeItems[0]).addClass('available');
                    })
    //              删除键
                    $(this).on('keyup', function(e){
                        if(e.keyCode === 8) {
                            $(valCodeItems[valCodeLength]).text("");
                            if(valCodeLength !== 0){
                                $(valCodeItems[valCodeLength]).removeClass('available');
                            }
                        }
                    });
    //              当验证码输入四位时直接跳转(在此验证验证码是否正确)
                    $(valCodeInput).on("input propertychange",function(){
                        if (valCodeInput.val().length == 4) {
                            $("#yanzhengma").fadeOut(200,function(){
                                //资料弹窗弹出
                                $("#dialog1").fadeIn(200);
                            })
                        }
                    })
                    
                    
                })
    //            把所有输入的不是数字的字符转换为空值
                function checkForNum(obj) {
                    obj.value = obj.value.replace(/[\D]/g, '');
                }

    展开全文
  • 项目页面需要输入验证码,可是百度了一下,没有找到简单的静态HTML样式。对于我一个初学者来说,没法直接拿过来就用。无奈之下,自己想了个办法,实现这个样式。因为现在上传资源最少要一分,所以现在拿出来在这里...

           项目页面需要输入验证码,可是百度了一下,没有找到简单的静态HTML样式。对于我一个初学者来说,没法直接拿过来就用。无奈之下,自己想了个办法,实现这个样式。因为现在上传资源最少要一分,所以现在拿出来在这里分享一下。

           废话不说上代码

    HTML:

    <div style="width: 90%; max-width: 20rem; margin: 1.5rem auto" id="yzm">
        <style>
            #yzm > input {
                width: calc(15% - 1rem);
                height: 2rem;
                background: transparent;
                border: 0;
                border-bottom: 0.1rem solid black;
                line-height: 2rem;
                font-size: 1.4rem;
                margin: 0.5rem;
                text-align: center;
            }
        </style>
        <input type="number" onclick="$('#yzminput').focus()" name="yzmlist" readonly="readonly" />
        <input type="number" onclick="$('#yzminput').focus()" name="yzmlist" readonly="readonly" />
        <input type="number" onclick="$('#yzminput').focus()" name="yzmlist" readonly="readonly" />
        <input type="number" onclick="$('#yzminput').focus()" name="yzmlist" readonly="readonly" />
        <input type="number" onclick="$('#yzminput').focus()" name="yzmlist" readonly="readonly" />
        <input type="number" onclick="$('#yzminput').focus()" name="yzmlist" readonly="readonly" />
    
        <input type="number" oninput="yzminput()" id="yzminput" style="width: 0; height: 0" />
    </div>

    SCRIPT:需要引用jquery;

    function yzminput() {
        var str = $("#yzminput").val();
        var num = new Array();
        for (i = 0; i < str.length; i++) {
            num[i] = str.charAt(i);
        }
        $.each(document.getElementsByName("yzmlist"), function (i, v) {
            v.value = num[i];
        });
        if ($("#yzminput").val().length > 6)
            $("#yzminput")[0].value = $("#yzminput").val().substr(0, 6);
    }

    方法很简单:

    1.先定义7个input,比验证码位数多一位。然后最后一个input使用宽高0的方法隐藏,其他input只读。

    2.点击input时,focus最后一个隐藏的input。这样用户输入内容就会变更最后一个input的内容

    3.最后一个input内容变更时,用oninput给其他input赋值,每个input放一个数字。完成。

    这样的好处是:

    1.获取验证码的时候只要获取最后一个input的值就可以了。

    2.input的样式可以任意修改,比如背景,宽度,框线之类的。

    不过也有缺点:

    不能明显的提示用户,目前输入到了第几个字母,这个可以通过js完善一下。判断输入到了第几个框。

    最重要的缺点是不显示输入光标。目前想不到办法解决

    在微信中打开页面时,宽高为0时,输入数字时倒序的。目前没有找到办法,暂时想到的方法是:宽设为100%,高0,然后字体颜色设置为与背景色一致。

    展开全文
  • iOS 单个验证码输入框

    2018-02-22 12:10:06
    一个演示单个数字验证码输入框 4位或者6位 本文通过细节的拆分, 逐步分析这个过程的实现, 难点并没有源码地址: 初始化一个textView用来获取输入的文字 通过Label显示输入的文字使用CAShapeLayer绘制光标 ...

    一个演示单个数字验证码的输入框 4位或者6位

    本文通过细节的拆分, 逐步分析这个过程的实现, 难点并没有源码地址

    1. 初始化一个textView用来获取输入的文字
    2. 通过Label显示输入的文字使用CAShapeLayer绘制光标
    3. 通过光标的显示隐藏来控制光标的移动
    4. 基础动画控制光标闪动
    5. 通过Block回调回调输入的Value值

    0060lm7Tly1fo7xrz2tgkg308w0ftb29.gif

    宏定义

    #define WIDTH         [UIScreen mainScreen].bounds.size.width
    #define HEIGHT        [UIScreen mainScreen].bounds.size.height
    #define K_W 59.5
    #define K_H 82
    #define PADDING 2
    #define XTUIColorFromRGB(rgbValue) [UIColor colorWithRed:((float)((rgbValue & 0xFF0000) >> 16))/255.0 green:((float)((rgbValue & 0xFF00) >> 8))/255.0 blue:((float)(rgbValue & 0xFF))/255.0 alpha:1.0]

    初始化正常颜色和高亮颜色

    - (instancetype)initWithFrame:(CGRect)frame {
        self = [super initWithFrame:frame];
        if (self) {
            /// 配置颜色
            _normalColor = XTUIColorFromRGB(0xe7e7e7);
            _hlColor = XTUIColorFromRGB(0x777777);
            _inputT = 4;
            self.setFrame = frame;
        }
        return self;
    }

    重新赋值输入框的个数

    - (void)setInputType:(NSInteger)inputType {
        _inputT = inputType;
    }

    初始化子视图

    - (void)initSubviews {
        /// 优先初始化textView
        [self addSubview:self.textView];
        if (_inputT == 4) {
            _textView.frame = CGRectMake((WIDTH - (4 * K_W) - (3 * PADDING)) / 2, 0, (4 * K_W) + (3 * PADDING), self.setFrame.size.height);
        }else {
            _textView.frame = CGRectMake(10, 0, WIDTH - 20, self.setFrame.size.height);
        }
        /// 默认编辑第一个.
        [self beginEdit];
        /// 初始化一个输入框
        /// 初始化四个号码框
        for (int i = 0; i < _inputT; i ++) {
            ///
            UIView *subView = [UIView new];
            float sizeW = (WIDTH - 20 - 5 * PADDING) / 6;
            if (_inputT == 4) {
                float left = (WIDTH - (4 * K_W) - (3 * PADDING)) / 2;
                subView.frame = CGRectMake(left + (K_W + PADDING) * i, 0, K_W, K_H);
            }else if (_inputT == 6){
                float left = 10;
                subView.frame = CGRectMake(left + (sizeW + PADDING) * i, 0, sizeW, K_H);
            }
            subView.userInteractionEnabled = NO;
            [self addSubview:subView];
            /// 4 Label
            UILabel *label = [UILabel new];
            if (_inputType == 4) {
                label.frame = CGRectMake(0, 0, K_W, K_H);
            }else {
                label.frame = CGRectMake(0, 0, sizeW, K_H);
            }
            label.textAlignment = NSTextAlignmentCenter;
            label.font = [UIFont systemFontOfSize:38];
            [subView addSubview:label];
            /// 4 光标
            UIBezierPath *path = [UIBezierPath bezierPathWithRect:CGRectMake(K_W / 2, 15, 2, K_H - 30)];
            CAShapeLayer *line = [CAShapeLayer layer];
            line.path = path.CGPath;
            line.fillColor =  XTUIColorFromRGB(0xd6d6d6).CGColor;
            [subView.layer addSublayer:line];
            if (i == 0) {
                [line addAnimation:[self opacityAnimation] forKey:@"kOpacityAnimation"];
                /// 高亮颜色
                label.backgroundColor = _hlColor;
                line.hidden = NO;
            }else {
                label.backgroundColor = _normalColor;
                line.hidden = YES;
            }
            /// 把光标对象和label对象装进数组
            [self.lines addObject:line];
            [self.labels addObject:label];
        }
    }

    通过value的改变来控制光标的显示与隐藏以及文字的显示

    - (void)textViewDidChange:(UITextView *)textView {
        NSString *verStr = textView.text;
    
        if (verStr.length > _inputT) {
            textView.text = [textView.text substringToIndex:_inputT];
        }
        /// 大于等于4时, 结束编辑
        if (verStr.length >= _inputT) {
            [self endEdit];
        }
        if (self.verCodeBlock) {
            self.verCodeBlock(textView.text);
        }
        for (int i = 0; i < _labels.count; i ++) {
            UILabel *bgLabel = _labels[i];
    
            if (i < verStr.length) {
                [self changeViewLayerIndex:i linesHidden:YES];
                bgLabel.text = [verStr substringWithRange:NSMakeRange(i, 1)];
            }else {
                [self changeViewLayerIndex:i linesHidden:i == verStr.length ? NO : YES];
                /// textView的text为空的时候
                if (!verStr && verStr.length == 0) {
                    [self changeViewLayerIndex:0 linesHidden:NO];
                }
                bgLabel.text = @"";
            }
        }
    }
    /// 光标 和 背景 显示或者隐藏
    - (void)changeViewLayerIndex:(NSInteger)index linesHidden:(BOOL)hidden {
        UILabel *label = self.labels[index];
        [UIView animateWithDuration:0.8 animations:^{
            label.backgroundColor = hidden ? _normalColor : _hlColor;
        }];
        CAShapeLayer *line = self.lines[index];
        if (hidden) {
            [line removeAnimationForKey:@"kOpacityAnimation"];
        }else{
            [line addAnimation:[self opacityAnimation] forKey:@"kOpacityAnimation"];
        }
        [UIView animateWithDuration:0.25 animations:^{
            line.hidden = hidden;
        }];
    }
    /// 开始编辑
    - (void)beginEdit{
        [self.textView becomeFirstResponder];
    }
    /// 结束编辑
    - (void)endEdit{
        [self.textView resignFirstResponder];
    }
    /// 闪动动画
    - (CABasicAnimation *)opacityAnimation {
        CABasicAnimation *opacityAnimation = [CABasicAnimation animationWithKeyPath:@"opacity"];
        opacityAnimation.fromValue = @(1.0);
        opacityAnimation.toValue = @(0.0);
        opacityAnimation.duration = 0.9;
        opacityAnimation.repeatCount = HUGE_VALF;
        opacityAnimation.removedOnCompletion = YES;
        opacityAnimation.fillMode = kCAFillModeForwards;
        opacityAnimation.timingFunction=[CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseIn];
        return opacityAnimation;
    }
    /// 对象初始化
    - (NSMutableArray *)lines {
        if (!_lines) {
            _lines = [NSMutableArray array];
        }
        return _lines;
    }
    - (NSMutableArray *)labels {
        if (!_labels) {
            _labels = [NSMutableArray array];
        }
        return _labels;
    }
    - (UITextView *)textView {
        if (!_textView) {
            _textView = [UITextView new];
            _textView.tintColor = [UIColor clearColor];
            _textView.backgroundColor = [UIColor clearColor];
            _textView.textColor = [UIColor clearColor];
            _textView.delegate = self;
            _textView.keyboardType = UIKeyboardTypeNumberPad;
        }
        return _textView;
    }

    使用

        XTVerCodeInput *verView = [[XTVerCodeInput alloc] initWithFrame:CGRectMake(0, 80, self.view.frame.size.width, 82)];
        verView.inputType = 6;
        [verView initSubviews];
        verView.verCodeBlock = ^(NSString *text){
            NSLog(@"您输入的验证码是%@",text);
        };
        [self.view addSubview:verView];
    展开全文
  • 短信验证码输入框
  • 显示、输入验证码的View,UI支持高度定制 OAuth Code View 源码:https://github.com/shede333/SWOAuthCode pod安装方式: pod 'SWOAuthCode'
  • 1.输入框的实现分析 主要由可见的6个方格子组成,这里可以看成6个输入框或者显示标签。输入6个数字,组成密码或者验证码,可以创建6个textField拼接,也可以用6个label去显示,具体做法都可以,主要是实现的...

    1.输入框的实现分析

       

          主要由可见的6个方格子组成,这里可以看成6个输入框或者显示标签。输入6个数字,组成密码或者验证码,可以创建6个textField拼接,也可以用6个label去显示,具体做法都可以,主要是实现的逻辑。

         首先用户在来到输入页面的时候,键盘一般是弹起的,所以得有个textFiled作为焦点弹起键盘,接收输入事件,这里我选用的是用6个label去显示,不用6个textFiled的原因是,要不断去判断是哪个textFiled获取的焦点,很麻烦,而用label只需判断有没有内容显示就可以了。每次输入完毕之后,将label的text设置为输入的内容,同时将textFiled的输入内容清空,同时记录输入的数字,这样保证每次输入都没有残留上次的输入内容,保证输入的唯一,方格站位满了之后就将输入的内容拼接起来,限制字符串的长度,这样就得到了想要的数字验证码或者密码。

    2.核心布局

         我用的是Masonry自动布局,比较方便,不用重复修改frame。主要就是线条及label的布局,控制好每个label的宽度,其余自适应就好,其余线条则根据每个label的left去修改即可。

    3.主要逻辑代码

     一个是输入的情况,另一个是删除的情况,需要分开判断。这里我只是简单粗暴的实现了6位密码的情况,其他情况的小伙伴可自行设置或者进行优化。

    - (void)textDidChanged:(UITextField *)textField {
        
        if (textField.text.length >= 6) {
            
            for (int i = 0; i < self.labelArray.count; i ++) {
                UILabel *label = self.labelArray[i];
                label.text = [textField.text substringFromIndex:i + 1];
                if (_isSecure) {
                    label.text = @"●";
                }
            }
            if (textField.text.length == 6) {
                _codeString = textField.text;
            }else {
                _codeString = [textField.text substringToIndex:6];
            }
            
        }else {
            for (int i = 0; i < self.labelArray.count; i ++) {
                UILabel *label = self.labelArray[i];
                
                if (label.text == nil) {
                    label.text = textField.text;
                    if (_isSecure) {
                        label.text = @"●";
                    }
                    break;
                }
            }
        }
    
        
        if (_codeString.length < 6) {
            if (_codeString == nil) {
                _codeString = textField.text;
            }else {
                _codeString = [_codeString stringByAppendingString:textField.text];
            }
        }
    
        textField.text = nil;
        
        if (_codeString.length == 6 && _codeString != nil) {
            if (_codeInputCompeletBlock) {
                _codeInputCompeletBlock (_codeString);
            }
            
            [[NSNotificationCenter defaultCenter] postNotificationName:CodeDidInputCompeletNotification object:_codeString];
        }
        
        NSLog(@"%@",_codeString);
    }

            这个是输入的情况,另外请注意,在iOS12及以上系统收到信息后,键盘顶部上会自动保存验证码的数字,所有这里还要做一步操作,就是让label分开显示一次性输入完验证码的情况,不然在删除数字的时候会崩溃。

    - (void)deleteBackward {
        
        for (int i = (int)self.labelArray.count - 1; i >= 0; i --) {
            UILabel *label = self.labelArray[i];
            
            if (label.text != nil) {
                label.text = nil;
                if (_codeString != nil) {
                    _codeString = [_codeString substringToIndex:i];
                    if (i == 0) {
                        _codeString = nil;
                    }
                }
                break;
            }
        }
        NSLog(@"%@",_codeString);
    }

    这个是删除时的情况。

    4.总结及效果展示

            总的来说,我这里只是实现了输入框的基本用法及逻辑,其余拓展的还有很多,比如输入错误颜色变化,输入框抖动等,其实具体分析一下很简单就做出来了。

            两种效果,分别是明文和密文。上方有demo资源,需要的小伙伴可自行下载。

              

    展开全文
  • 密码 样式 自定义输入验证码样式   git地址: ... 支持全部自定义 输入样式,背景图片样式,每位验证码背景图的间距。 1.使用方式:  //每位 验证码/密码 宽高CGFloat codeBgWH =

    密码框 样式                           自定义输入验证码样式

               

    git地址: https://github.com/HSFGitHub/CodeInputView.git

    支持全部自定义 ,几位验证码的变化,输入样式,背景图片样式,每位验证码背景图的间距。

    当验证码输入完成后,自动通过代理(

    -(void)codeInputView:(HSFCodeInputView *)inputView code:(NSString *)code{}
    )获取当前输入的内容。

    使用场景: 当输入完成后,自动去网络验证内容。


    1.使用方式: 

    //每位 验证码/密码 宽高

    CGFloat codeBgWH = 60; 

    //每位 验证码/密码 间距

    CGFloat codeBgPadding = 10; 
    //验证码个数 
    NSInteger numberOfVertificationCode = 4;
    
    //验证View大小
    CGFloat inputViewWidth = codeBgWH * 4 + codeBgPadding *3;
    CGFloat inputViewHeight = codeBgWH;
    
    
    HSFCodeInputView *inputView = [[HSFCodeInputView alloc]initWithFrame:CGRectMake(10, 200, inputViewWidth, inputViewHeight)];
    
    inputView.numberOfVertificationCode = numberOfVertificationCode;
    
    //是否密码模式
    //inputView.secureTextEntry = YES;
    [self.view addSubview:inputView];
    
    /************************************************/
    
    2.如何拿到如何的数据呢?
    当输入到最后一位时。可以通过代理拿到输入的数据。
    例如:
    //(1).引入 <HSFCodeInputViewDelegate> 代理
    @interface ViewController ()<HSFCodeInputViewDelegate>
    @end
    
    //(2)创建View,并设置代理
     HSFCodeInputView *inputView = [[HSFCodeInputView alloc]initWithFrame:CGRectMake(10, 200, inputViewWidth, inputViewHeight)];
     //设置代理
     inputView.delegate = self;
     [self.view addSubview:inputView];
     
     //(3)//代理方法回调,拿到数据
    -(void)codeInputView:(HSFCodeInputView *)inputView code:(NSString *)code{
    
    NSLog(@"  -----   验证码或者密码是  %@",code);
    }
    


    展开全文
  • 自定义封装的一个iOS验证码和密码的输入框,可以输入明文和密文两种方式,更新细节代码
  • Android 自定义方形验证码输入框,仿滴滴、小篮单车
  • 1、效果图 最终实现效果: 2、实现过程 第一版本 <Flex className="login-code"> <Flex.Item> <InputItem type="number" className="input1" maxLength={1} value={codearr[0]} ... {
  • 手机验证码 {{value[index] || placeholder}}
  • 来分析一下这个验证码部分,实现这样一个自定义View,首先,要区分单个验证码选中状态和未选中状态,并且光标悬停在选中的验证码中心,其次, 每次输入文字后需要依次显示在每个单独的验证码容器中,还有诸如自定义...
  • 封装好的可以用来做登录,注册,验证码输入框,自带限制输入长度,可以方便设置各种属性
  • 自定义短信验证码输入框 + 自定义数字字母软键盘 前段时间做了一个需求,类似验证码输入框,但输入的优惠码有数字和大小写字母,所以就需要用到自定义软键盘,不然总是切换数字与字母太麻烦,用户体验不佳。 刚...
  • 首先的想法就是6个input,每输入一个数字之后,切换到下一个input,即切换focus,昨晚发现安卓机很流畅啊,但是要命的是ios并不是那么流畅,有卡顿的感觉,输很快会导致感觉手机要卡死的感觉,当然要pass, ...
  • 封装一个带有输入框的短信验证码,拿来即可使用,不喜勿喷.
  • 该方案是 参考网上 已有方案 改版成自己需要的特效 有需要的同学拿去用  //自定义 view @interface IDVertificationCodeInputView : UIView /**背景图片*/ @property (nonatomic, copy) NSString *...
  • iOS 获取验证码 demo

    2020-07-13 23:31:03
    iOS获取验证码demo
  • #import <UIKit/UIKit.h> NS_ASSUME_NONNULL_BEGIN typedef void (^ResultBlock)(NSString *str , NSDictionary *dic,BOOL isOK); @interface StepField : UIView - (instancetype)initWithFrame:(CGRect)fr....
  • 滴滴短信验证码效果 先上截图 实现思路:自定义View继承自EditText,根据设置的子属性数量,遍历保存画布状态和平移,根据当前激活的索引设置背景。 核心方法: anvas.save();//保存画布状态 canvas.translate(dx, ...
1 2 3 4 5 ... 20
收藏数 1,012
精华内容 404
关键字:

4框验证码输入框 ios