如何使用jquery在文本输入字段中实现类似ipad的密码字段行为

Question

是否有类似于类似iPad的密码字段行为的插件。我们只需要显示客户输入信用卡号时输入的焦点号码，然后在客户输入下一个号码后切换到子弹。

对于在输入号码之前输入的号码，所有号码都需要更改为子弹样式。

Answer 1

不确定Jquery插件。试过这个。希望这对你有用 - http://jsfiddle.net/Lhw7xcy6/12/

＆＃13;

＆＃13;

(function () {
    var config = {},
    bulletsInProgress = false,
        bulletTimeout = null,
        defaultOpts = {
            className: 'input-long',
            maxLength: '16',
            type: 'tel',
            autoComplete: 'off'
        };
    var generateBullets = function (n) {
        var bullets = '';
        for (var i = 0; i < n; i++) {
            bullets += "\u25CF";
        }
        return bullets;
    },
    getCursorPosition = function (elem) {
        var el = $(elem).get(0);
        var pos = 0;
        var posEnd = 0;
        if ('selectionStart' in el) {
            pos = el.selectionStart;
            posEnd = el.selectionEnd;
        } else if ('selection' in document) {
            el.focus();
            var Sel = document.selection.createRange();
            var SelLength = document.selection.createRange().text.length;
            Sel.moveStart('character', -el.value.length);
            pos = Sel.text.length - SelLength;
            posEnd = Sel.text.length;
        }
        return [pos, posEnd];
    },
    keyInputHandler = function (e, elem, $inpField) {
        var keyCode = e.which || e.keyCode,
            timeOut = 0,
            $bulletField = $(elem),
            tempInp = $bulletField.data('tempInp'),
            numBullets = $bulletField.data('numBullets');
        var position = getCursorPosition(elem);
        if (keyCode >= 48 && keyCode <= 57) {
            e.preventDefault();
            clearTimeout(bulletTimeout);
            $bulletField.val(generateBullets(numBullets) + String.fromCharCode(keyCode));
            tempInp += String.fromCharCode(keyCode);
            numBullets += 1;
            bulletsInProgress = true;
            timeOut = 3000;
        } else if (keyCode == 8) {
            clearTimeout(bulletTimeout);
            tempInp = (position[0] == position[1]) ? tempInp.substring(0, position[0] - 1) + tempInp.substring(position[1]) : tempInp.substring(0, position[0]) + tempInp.substring(position[1]);
            numBullets = (position[0] == position[1]) ? numBullets - 1 : numBullets - (position[1] - position[0]);
            tempInp = ($.trim($bulletField.val()) === '') ? '' : tempInp;
            numBullets = ($.trim($bulletField.val()) === '') ? 0 : numBullets;
            timeOut = 0;
        } else {
            e.preventDefault();
            return false;
        }
        $bulletField.data('numBullets', numBullets);
        $bulletField.data('tempInp', tempInp);
        $inpField.val(tempInp);
        $('#output').val(tempInp); // testing purpose
        bulletTimeout = setTimeout(function () {
            $bulletField.val(generateBullets(numBullets));
            bulletsInProgress = false;
        }, timeOut);
    };
    $.fn.bulletField = function (options) {
        var opts = $.extend({}, defaultOpts, options);
        //console.log(opts);
        this.each(function () {
            var $inpField = $(this),
                id = $inpField.attr('id');
            $inpField.after('<input id="bullet_' + id + '" type=' + opts.type + ' maxlength=' + opts.maxLength + '  autocomplete=' + opts.autoComplete + ' class=' + opts.className + '>');
            $inpField.hide();
            var bulletFieldId = 'bullet_' + id;
            var $bulletField = $('#' + bulletFieldId);
            $bulletField.data('numBullets', 0);
            $bulletField.data('tempInp', '');
            $('#' + bulletFieldId).on('keydown', function (e) {
                keyInputHandler(e, this, $inpField);
            });
            $('#' + bulletFieldId).on('blur', function () {
                //$inpField.trigger('blur');
            });
        });
        return this;
    };
}());
$(function () {
    /*USAGE  - invoke the plugin appropriately whenever needed. example -onclick,onfocus,mousedown etc.*/
    //$('body').on('mousedown', '#bulletField', function () {
        $('#bulletField').bulletField();
        //$('body').off('mousedown');
   // });
    /* ---OR ---- 
        $('#bulletField').bulletField({
			className: 'input-short',
			maxLength : '4'
			});*/
});

＆＃13;

＆＃13;

＆＃13;