jQuery根据accordion-header设置max值分割输入数字并展示问题咨询

问题根因 #

你代码的核心问题是混淆了type="number"输入框原生属性的作用：

• 原生number类型输入框的max属性是用来限制输入的数值最大值，不是输入字符的长度。当你输入的数值超过max设定值时，输入框会判定输入无效，此时通过val()获取到的值为空字符串，自然无法满足长度判断条件。
• 你将自定义的长度阈值存在了max属性中，和原生属性作用冲突，同时从attr获取的属性值是字符串类型，直接做数值比较容易出现隐式转换异常。

修复方案（按你要求的长度判断逻辑实现） #

你只需要修改JS部分逻辑，将长度阈值存在自定义属性中，避免和原生max属性冲突即可：

$('#mx_input,#num_list').hide();
$('.accordion-header').on('click', function() {
  // 获取绑定的长度阈值，转成数字
  const maxLen = Number($(this).find('button').data('mx'));
  $('#mx_input').show();
  // 存在自定义data属性中，不占用原生max属性
  $('#mx_input').data('max-len', maxLen);
  // 可选：如果要限制输入框最多只能输入maxLen位，可加下面这行
  // $('#mx_input').attr('maxlength', maxLen);
});

$("#mx_input").on("input", function() {
  $('#num_list').show();
  const $el = $(this);
  const maxLen = $el.data('max-len');
  const input = $el.val();
  // 先判断输入有有效值，再判断长度是否达标
  if (input && input.length >= maxLen) {
    $('#num_list').append(`<li>${input.slice(0, maxLen)}</li>`);
    $el.val('');
  }
});

补充：如果你的真实需求是数值大小判断（即输入数值≥data-mx值就触发追加） #

可以用以下修改后的JS逻辑：

$('#mx_input,#num_list').hide();
$('.accordion-header').on('click', function() {
  const maxVal = Number($(this).find('button').data('mx'));
  $('#mx_input').show();
  // 可设置原生max属性限制输入数值不能超过阈值
  $('#mx_input').attr('max', maxVal);
  $('#mx_input').data('max-val', maxVal);
});

$("#mx_input").on("input", function() {
  $('#num_list').show();
  const $el = $(this);
  const maxVal = $el.data('max-val');
  const inputVal = Number($el.val());
  // 先判断输入是有效数字，再判断是否超过阈值
  if (!isNaN(inputVal) && inputVal >= maxVal) {
    $('#num_list').append(`<li>${inputVal}</li>`);
    $el.val('');
  }
});

内容的提问来源于stack exchange，提问作者Wilf