如何设置span的maxlength

Question

我有屏幕数字小键盘，我在跨度中显示输入的数字，我想将最大限制设置为4位，我如何设置跨度的最大长度？请找到HTML和Javascript。

HTML

jQuery(document).ready(function($){ 

  function reflow(){
    //adding reflow to allow the DOM to process the removeClass before calling the addClass, which insures that the css key-frame animation fires. This is an adaptation of a vaniall JS trick from Chris Coyier https://css-tricks.com/restart-css-animation
    $('#numerals').width($('#numerals').width());
  }

  function jiggle(){
    $('#numerals').removeClass('jiggle');
    reflow();
    $('#numerals').addClass('jiggle');
  }

  $(document).on('click', '.key', function(){  
    var content = $(this).find('span').html();

    function add(){
      $('#numerals').append('<span class="numeral">' + content + '</span>');
      reflow();
      $('.numeral').last().addClass('displayed');
    }

    if(!$(this).parent().parent().hasClass('numberpad')){
        if($('.numeral').length < 6){
          if(($('.numeral').length == 0) && (content == '0' || content == '.')){
            jiggle();
          } else if(($('.numeral').length == 0) && (content !== '0' || content !== '.')){
              $('#numerals').find('span').addClass('hide');
                setTimeout(
                function() 
                {
                  $('.hide').hide();
                  add();
                }, 150);
              } else if (content == '.'){
                add();
              } else if($('.numeral').last().hasClass('decimals')){
                add();
              } else {
                add();
                if(!$(this).parent().parent().hasClass('numberpad')){
                    //resize();
                }
              }
        } else if ($('.numeral').length == 6 && content == '.'){
          decimal();
        } else if (($('.numeral').length == 7 || $('.numeral').length == 6) && $('.numeral').last().hasClass('decimals')){
          decimalAdd();
        } else if ($('.numeral').length == 0){
          $('#numerals').append('<span class="numeral">0</span>');
          $('.numeral').last().addClass('displayed');
        } else {
          jiggle();
        }
      }else{
        if(($('.numeral').length == 0) && (content == '0' || content == '.')){
                jiggle();
            } else if(($('.numeral').length == 0) && (content !== '0' || content !== '.')){
                $('#numerals').find('span').addClass('hide');
                setTimeout(
                function() 
                {
                    $('.hide').hide();
                  add();
                }, 150);
            } else if (content == '.'){
                decimal();
            } else if($('.numeral').last().hasClass('decimals')){
                decimalAdd();
            } else {
                add();
                if(!$(this).parent().parent().hasClass('numberpad')){
                    //resize();
                }
            }
      }
  });

  $(document).on('click', '#back', function(){  
    if($('.numeral').length > 0){       
      $('.numeral').last().remove();    
      //jiggle();
    }
    if($('.numeral').last().hasClass('decimals')){
        alert(1);
        $('.numeral').last().remove(); 
    }

  });

  function move(direction){

    var u = $('#user-info'),
    h = $('#history-info'),
    a = $('#app-container'),
    w = $('#app-container').width(),
    uPos = u.css('left'),
    uPos = parseInt(uPos),
    hPos = h.css('left'),
    hPos = parseInt(hPos),
    aPos = a.css('left'),
    aPos = parseInt(aPos);

    if(direction == 'left'){
      u.css('left', uPos + w);
      h.css('left', hPos + w);
      a.css('left', aPos + w).toggleClass('greyed');
    } else if(direction == 'right') {
      u.css('left', uPos - w);
      h.css('left', hPos - w);
      a.css('left', aPos - w).toggleClass('greyed');
    }
  }

  $(document).on('click', '#user, #back-left', function(){  
    move('left');
  });

  $(document).on('click', '#history, #back-right', function(){  
    move('right');
  });

  //resize();
});

JS

{{1}}