如何在输入框的完整输入值后添加' h'后缀？

一、修复输入框自动添加单位的问题 #

原代码的问题在于每次输入字符都会触发input事件并直接追加" h"，导致重复拼接（比如输入"2"→"2 h"，输入"1"时会先变成"2 h1"，再追加" h"得到"2 h1 h"）。以下是两种可靠的修复方式：

方法1：提取纯数字后拼接单位（推荐） #

只保留输入中的数字部分，再统一添加单位，避免重复拼接：

$(".input").on('input', function(){
  // 过滤掉所有非数字字符
  let num = $(this).val().replace(/[^0-9]/g, '');
  // 有数字时显示"数字 h"，空值时清空输入框
  $(this).val(num ? num + " h" : "");
});

方法2：判断单位是否已存在再处理 #

通过检查输入值末尾是否已有" h"，避免重复添加：

$(".input").on('input', function(){
  let val = $(this).val().trim();
  // 如果末尾没有" h"，先移除可能残留的单位再重新添加
  if (!val.endsWith(" h")) {
    let cleanVal = val.replace(/ h$/, '');
    $(this).val(cleanVal + " h");
  }
});

二、在输入框后添加<p>标签 #

可以通过jQuery的after()方法直接插入静态标签，或结合输入事件动态更新标签内容：

静态添加标签 #

如果只需要固定的说明文字，页面加载时插入即可：

$(document).ready(function(){
  // 在输入框后插入静态<p>标签
  $(".input").after('<p>请输入时长，系统将自动添加小时单位</p>');
});

动态更新标签内容 #

如果需要同步显示输入的时长信息，可结合input事件更新：

$(document).ready(function(){
  // 先插入空的<p>标签
  $(".input").after('<p class="duration-info"></p>');
  
  $(".input").on('input', function(){
    let num = $(this).val().replace(/[^0-9]/g, '');
    $(this).val(num ? num + " h" : "");
    // 更新<p>标签的内容
    $(".duration-info").text(`当前时长：${num || 0} 小时`);
  });
});

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