javascript - 显示保存的输入值

Question

在用户帐户中，我有一个用于输入号码的字段。当您单击此字段时，会触发一个包含多个字段的漂亮蒙版。输入数字后，数据存储在一个已经隐藏的字段中。此外，理论上，我需要发送一个表格，此数据将保存在该人的帐户中。如果我想编辑这个号码，发送后如何在同一个字段中显示？

$(document).ready(function() {
    $('.codeInput').codeInput({
        number: 6
    });
});

jQuery.fn.codeInput = function(options) {

    var defaults = {
        number: 6,
        length: 1
    };

    var settings = $.extend({}, defaults, options);

    return this.each(function() {

        var self = $(this);
        var placeholder = self.attr('placeholder');
        var div = $('<div />').addClass('codeInput-container');

        div.append($('<span />').text(placeholder));

        self.replaceWith(div);

        div.append(self);

        var inputDiv = $('<div />').addClass('inputs');

        for(var i = 1; i <= settings.number; i++) {
            inputDiv.append($('<input />').attr({
                maxlength: settings.length
            }));
        }

        div.prepend(inputDiv);

        div.on('click touchstart', function(e) {
            if(!div.hasClass('active')) {
                div.addClass('active');
                setTimeout(function() {
                    div.find('.inputs input:first-child').focus();
                }, 400);
            }
        });

        div.find('.inputs').on('keyup input', 'input', function(e) {
            if($(this).val().toString().length >= settings.length || e.keyCode == 39) {
                $(this).next().focus();
            }
            if(e.keyCode == 8 || e.keyCode == 37) {
                $(this).prev().focus();
            }
            var value = '';
            div.find('.inputs input').each(function() {
                value = value + $(this).val().toString();
            });
            self.attr({
                value: value
            });
        });

        $(document).on('click touchstart', function(e) {
            if(!$(e.target).parent().is(div) && !$(e.target).parent().parent().is(div)) {
                var hide = true;
                div.find('.inputs input').each(function() {
                    if($(this).val().toString().length) {
                        hide = false;
                    }
                });
                if(hide) {
                    div.removeClass('active');
                    div.find('.inputs input').blur();
                } else {
                    div.addClass('active');
                }
            }
        });

    });

}

.codeInput-container {
  max-width: 240px;
  position: relative;
}
.codeInput-container > input {
  display: none;
}
.codeInput-container:before {
  content: '';
  display: block;
  bottom: 0;
  left: 0;
  position: absolute;
  right: 0;
  border-bottom: 1px solid;
  border-color: #E6E8F0;
  transition: opacity .3s ease;
}
.codeInput-container > span {
  font-size: 18px;
  position: absolute;
  left: 0;
  z-index: 1;
  top: 0;
  right: 0;
  line-height: 40px;
  display: block;
  color: #ADAFB6;
  transition: all .3s ease;
}
.codeInput-container .inputs {
  display: flex;
  flex-flow: row nowrap;
}
.codeInput-container .inputs input {
  -webkit-appearance: none;
  opacity: 0;
  display: flex;
  flex-flow: column nowrap;
  align-items: center;
  flex: 1;
  padding: 0;
  min-width: 0;
  margin-right: 8px;
  border: 0;
  border-bottom: 1px solid;
  border-color: #E6E8F0;
  background: none;
  line-height: 40px;
  color: #727682;
  text-align: center;
  font-size: 18px;
  outline: none;
  border-radius: 0;
  transition: all .3s ease;
}
.codeInput-container .inputs input:focus {
  border-color: #5D9BFB;
}
.codeInput-container .inputs input:last-child {
  margin-right: 0;
}
.codeInput-container.active:before {
  opacity: 0;
}
.codeInput-container.active > span {
  -webkit-transform: translate(0, -100%);
          transform: translate(0, -100%);
  border-color: transparent;
  line-height: 20px;
  font-size: 14px;
  opacity: .6;
}
.codeInput-container.active .inputs input {
  opacity: 1;
}

body {
  min-height: 100vh;
  font-family: Roboto, Arial;
  display: flex;
  justify-content: center;
  align-items: center;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input class="codeInput" type="text" placeholder="Code" value="343434">

Answer 1

您可以在选项中添加值并在创建时设置代码:

$(document).ready(function() {
    $('.codeInput').codeInput({
        values: $('.codeInput').val(),
        number: 6
    });
});

jQuery.fn.codeInput = function(options) {

    var defaults = {
        number: 6,
        length: 1
    };
    //alert(options.values);
    var settings = $.extend({}, defaults, options);

    return this.each(function() {

        var self = $(this);
        var placeholder = self.attr('placeholder');
        var div = $('<div />').addClass('codeInput-container');

        div.append($('<span />').text(placeholder));

        self.replaceWith(div);

        div.append(self);

        var inputDiv = $('<div />').addClass('inputs');

        for(var i = 1; i <= settings.number; i++) {
            inputDiv.append($('<input />').attr({
                maxlength: settings.length,
                placeholder:settings.values.charAt(i-1)
            }));
        }

        div.prepend(inputDiv);

        div.on('click touchstart', function(e) {
            if(!div.hasClass('active')) {
                div.addClass('active');
                setTimeout(function() {
                    div.find('.inputs input:first-child').focus();
                }, 400);
            }
        });

        div.find('.inputs').on('keyup input', 'input', function(e) {
            if($(this).val().toString().length >= settings.length || e.keyCode == 39) {
                $(this).next().focus();
            }
            if(e.keyCode == 8 || e.keyCode == 37) {
                $(this).prev().focus();
            }
            var value = '';
            div.find('.inputs input').each(function() {
                value = value + $(this).val().toString();
            });
            self.attr({
                value: value
            });
        });

        $(document).on('click touchstart', function(e) {
            if(!$(e.target).parent().is(div) && !$(e.target).parent().parent().is(div)) {
                var hide = true;
                div.find('.inputs input').each(function() {
                    if($(this).val().toString().length) {
                        hide = false;
                    }
                });
                if(hide) {
                    div.removeClass('active');
                    div.find('.inputs input').blur();
                } else {
                    div.addClass('active');
                }
            }
        });

    });

}

.codeInput-container {
  max-width: 240px;
  position: relative;
}
.codeInput-container > input {
  display: none;
}
.codeInput-container:before {
  content: '';
  display: block;
  bottom: 0;
  left: 0;
  position: absolute;
  right: 0;
  border-bottom: 1px solid;
  border-color: #E6E8F0;
  transition: opacity .3s ease;
}
.codeInput-container > span {
  font-size: 18px;
  position: absolute;
  left: 0;
  z-index: 1;
  top: 0;
  right: 0;
  line-height: 40px;
  display: block;
  color: #ADAFB6;
  transition: all .3s ease;
}
.codeInput-container .inputs {
  display: flex;
  flex-flow: row nowrap;
}
.codeInput-container .inputs input {
  -webkit-appearance: none;
  opacity: 0;
  display: flex;
  flex-flow: column nowrap;
  align-items: center;
  flex: 1;
  padding: 0;
  min-width: 0;
  margin-right: 8px;
  border: 0;
  border-bottom: 1px solid;
  border-color: #E6E8F0;
  background: none;
  line-height: 40px;
  color: #727682;
  text-align: center;
  font-size: 18px;
  outline: none;
  border-radius: 0;
  transition: all .3s ease;
}
.codeInput-container .inputs input:focus {
  border-color: #5D9BFB;
}
.codeInput-container .inputs input:last-child {
  margin-right: 0;
}
.codeInput-container.active:before {
  opacity: 0;
}
.codeInput-container.active > span {
  -webkit-transform: translate(0, -100%);
          transform: translate(0, -100%);
  border-color: transparent;
  line-height: 20px;
  font-size: 14px;
  opacity: .6;
}
.codeInput-container.active .inputs input {
  opacity: 1;
}

body {
  min-height: 100vh;
  font-family: Roboto, Arial;
  display: flex;
  justify-content: center;
  align-items: center;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input class="codeInput" type="text" placeholder="Code" value="343434">

关于评论中的问题，您可以在创建 div 后添加此行

    var div = $('<div />').addClass('codeInput-container');
    if(settings.values.length>0)div.addClass('active');