如何使用jQuery在文本輸入字段中實現類似於ipad的密碼字段行為

Question

是否有任何類似於類似iPad的密碼字段行為的插件。 我們只需要顯示客戶輸入信用卡號時輸入的焦點號碼，然后在客戶鍵入下一個號碼時切換到項目符號。

對於在輸入數字之前輸入的數字，都需要將其全部更改為項目符號樣式。

Answer 1

不確定Jquery插件。 試試了 希望這對您有用-http://jsfiddle.net/Lhw7xcy6/12/

 (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 += "\●"; } 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' });*/ });