基于pointme输入的0-100数值将DIV对应字母自动填充到soundme输入框

调整思路 #

• 把现在用来临时展示字母的4个隐藏p标签、无关的myTextField输入框都删掉，这些元素完全冗余，不会参与最终表单提交流程
• 原有的分值-等级匹配规则直接绑定到pointme输入框的交互逻辑上，匹配完成后直接把结果写入soundme输入框，不需要中间展示步骤
• 补充异常值校验，输入超过规则范围的数值时弹出提示，同时自动重置为合法值，避免脏数据提交到数据库

调整后可直接使用的代码 #

HTML部分 #

<div class="row">
  <!-- contestant 1 -->
  <div class="col-sm-3">
    <input type="text" name="nameme" value="No Value">
  </div>
  <div class="col-sm-3">
    <input type="text" name="pointme" id="v0" class="adj" maxlength="2" value="0">
  </div>
  <div class="col-sm-3">
    <!-- soundme加了readonly属性防止手动修改自动生成的等级，不需要这个限制可以直接删掉属性 -->
    <input type="text" name="soundme" class="adj" maxlength="1" value="0" readonly>
  </div>
</div>

jQuery逻辑部分 #

jQuery(document).ready(function () {
  // 同时绑定输入、失焦事件，既保证输入时实时更新匹配结果，又能在失焦时完成二次校验
  jQuery('input[name="pointme"]').on('input blur', function() {
    // 读取当前pointme的输入值，非数字统一按0处理
    const pointNum = parseFloat(jQuery(this).val()) || 0;
    // 定位同一行内的soundme输入框，后续加多组选手输入区块时不用单独改id，逻辑可直接复用
    const soundBox = jQuery(this).closest('.row').find('input[name="soundme"]');
    let levelText = '';

    // 按既定规则匹配对应等级
    if (pointNum === 0) {
      levelText = 'W';
    } else if (pointNum >= 1 && pointNum <= 15) {
      levelText = 'M';
    } else if (pointNum >= 16 && pointNum <= 35) {
      levelText = 'K';
    } else if (pointNum >= 36 && pointNum <= 60) {
      levelText = 'R';
    } else if (pointNum > 60) {
      alert("分值超出判定范围，请输入0-60区间的数值");
      // 异常值直接重置为合法初始值
      jQuery(this).val(0);
      levelText = 'W';
    }

    // 把匹配到的等级直接写入soundme输入框，随表单一同提交
    soundBox.val(levelText);
  });

  // 页面加载完成后自动触发一次校验，把默认0分对应的W值写入soundme，和页面初始状态匹配
  jQuery('input[name="pointme"]').trigger('blur');
});

注意事项 #

• 事件同时绑定input和blur的组合，比单纯用onkeyup兼容性更好，就算用户直接粘贴数值，也能正常触发匹配逻辑
• 初始加载时的触发逻辑是为了修正原来soundme默认值为0的问题，保证表单初始状态的字段值符合规则
• 如果后续需要扩展更高分值对应的等级规则，直接在判断分支里加对应逻辑即可

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