Javascript 如何为span设置maxlength

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

HTML

1
2
3
4
5
6
7
8
9

0
X

JS

jQuery（document）.ready（函数（$）{
函数回流（）{
//添加回流以允许DOM在调用addClass之前处理removeClass，从而确保css关键帧动画触发。这是Chris Coyier的vaniall JS技巧的改编https://css-tricks.com/restart-css-animation
$（'数字'）.width（$（'数字'）.width（））；
}
函数抖动（）{
$（“#数字”）.removeClass（'jiggle'）；
回流焊（）；
$（“#数字”）.addClass（'jiggle'）；
}
$（文档）.on（'click'，'.key'，function（）{
var content=$（this.find（'span'）.html（）；
函数add（）{
$（“#数字”）。追加（“”+内容+“”）；
回流焊（）；
$（'.numeric'）.last（）.addClass（'displated'）；
}
if（！$（this.parent（）.parent（）.hasClass（'numberpad'））{
如果（$（'.numeric'）。长度<6）{
如果（$（'.numeric'）.length==0）和（&（content==0'| | content==0'））{
抖动（）；
}如果（$（'.numeric'）.length==0）和（&（content！='0'| | content！='0'））{
$（“#数字”）.find（'span'）.addClass（'hide'）；
设置超时(
函数（）
{
$（'.hide'）.hide（）；
添加（）；
}, 150);
}else if（内容='。）{
添加（）；
}else if（$（'.numeric'）.last（）.hasClass（'decimals'））{
添加（）；
}否则{
添加（）；
if（！$（this.parent（）.parent（）.hasClass（'numberpad'））{
//调整大小（）；
}
}
}else if（$（'.numeric'）。长度==6&&content=='.）{
十进制（）；
}如果（$（'.numeric'）.length==7 |$（'.numeric'）.length==6）和（$（'.numeric'）.last（）.hasClass（'decimals'））{
decimalAdd（）；
}else if（$（'.numeric'）。长度==0）{
$（“#数字”）。追加（'0'）；
$（'.numeric'）.last（）.addClass（'displated'）；
}否则{
抖动（）；
}
}否则{
如果（$（'.numeric'）.length==0）和（&（content==0'| | content==0'））{
抖动（）；
}如果（$（'.numeric'）.length==0）和（&（content！='0'| | content！='0'））{
$（“#数字”）.find（'span'）.addClass（'hide'）；
设置超时(
函数（）
{
$（'.hide'）.hide（）；
添加（）；
}, 150);
}else if（内容='。）{
十进制（）；
}else if（$（'.numeric'）.last（）.hasClass（'decimals'））{
decimalAdd（）；
}否则{
添加（）；
if（！$（this.parent（）.parent（）.hasClass（'numberpad'））{
//调整大小（）；
}
}
}
});
$（文档）.on（'click'，'#back'，function（）{
如果（$（'.numeric'）.length>0{
$（'.numeric'）.last（）.remove（）；
//抖动（）；
}
if（$（'.numeric'）.last（）.hasClass（'decimals'））{
警报（1）；
$（'.numeric'）.last（）.remove（）；
}
});
功能移动（方向）{
变量u=$（“#用户信息”），
h=$（“#历史信息”），
a=$（“#应用程序容器”），
w=$（“#应用程序容器”）.width（），
uPos=u.css（“左”），
uPos=parseInt（uPos），
hPos=h.css（'left'），
hPos=parseInt（hPos），
aPos=a.css（'left'），
aPos=parseInt（aPos）；
如果（方向=‘左’）{
u、 css（“左”，uPos+w）；
h、 css（“左”，hPos+w）；
a、 css（'left'，aPos+w）.toggleClass（'greed'）；
}否则如果（方向=‘右’）{
u、 css（“左”，uPos-w）；
h、 css（“左”，hPos-w）；
a、 css（'left'，aPos-w）.toggleClass（'greed'）；
}
}
$（文档）。在（'click'，'#user，#back left'，function（）{
移动（“左”）；
});
$（文档）。在（'单击'，'历史记录，'返回右侧'）上，函数（）{
移动（“右”）；
});
//调整大小（）；
});

这里有很多代码，其中大部分似乎与问题无关。请删除所有不相关的代码。什么是有效的还是无效的？您的问题陈述没有引用实际代码。通读一下，这里有很多代码，其中大部分似乎与问题无关。请删除所有不相关的代码。什么是有效的还是无效的？您的问题陈述没有引用实际代码。通读并

<section id="app" class="numberpad">
    <section id="display" class="semi">
    <div class="semi mten">
      <span id="numerals"></span>
    </div>
  </section>
  <ul id="keypad" class="semi">
    <li id="one" class="key" role="button"><span class="number">1</span></li>
    <li id="two" class="key" role="button"><span class="number">2</span></li>
    <li id="three" class="key" role="button"><span class="number">3</span></li>
    <li id="four" class="key" role="button"><span class="number">4</span></li>
    <li id="five" class="key" role="button"><span class="number">5</span></li>
    <li id="six" class="key" role="button"><span class="number">6</span></li>
    <li id="seven" class="key" role="button"><span class="number">7</span></li>
    <li id="eight" class="key" role="button"><span class="number">8</span></li>
    <li id="nine" class="key" role="button"><span class="number">9</span></li>
    <li id="dot"><span class="number">&nbsp;</span></li>
    <li id="zero" class="key" role="button"><span class="number">0</span></li>
    <li id="back" role="button"><span class="number">X</span></li>
  </ul>          
</section>

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();
});