JS/jQuery实现输入框字符增减时联动数值每次±10功能

嘿，这个需求实现起来思路很清晰，我给你一步步拆解：

首先得搭好基础的HTML结构，要有指定id的输入框和初始值为100的span：

<input type="text" id="input-price">
<span id="count-display">100</span>

接下来是核心的JavaScript逻辑，我们需要监听输入框的内容变化，通过对比输入前后的字符长度来判断是输入还是删除操作，进而更新span的数值：

// 先获取页面上的目标元素
const input = document.getElementById('input-price');
const displaySpan = document.getElementById('count-display');

// 初始化两个关键变量：记录上一次输入框的字符长度，以及当前span显示的数值
let prevInputLength = 0;
let currentValue = parseInt(displaySpan.textContent, 10);

// 监听输入框的input事件——这个事件能捕获所有修改输入内容的操作，比如键盘输入、粘贴、剪切
input.addEventListener('input', function() {
  // 获取当前输入框的字符长度
  const currentLength = this.value.length;
  // 计算和上一次长度的差值：正数代表输入了字符，负数代表删除了字符
  const lengthDiff = currentLength - prevInputLength;

  // 根据差值更新数值：每多一个字符加10，每少一个减10
  if (lengthDiff !== 0) {
    currentValue += lengthDiff * 10;
  }

  // 更新span显示的内容
  displaySpan.textContent = currentValue;

  // 把当前长度保存为「上一次长度」，用于下一次判断
  prevInputLength = currentLength;
});

额外补充说明： #

• 选择input事件而非keydown/keyup的原因是，它能覆盖所有修改输入框内容的场景——比如用户右键粘贴文本、用剪切键删除内容，这些操作keydown可能捕捉不到，但input事件都能正常处理。
• 通过「长度差」计算数值变化的逻辑，哪怕用户一次性粘贴多个字符（比如粘贴3个字符，数值直接加30）或者一次性删除多个内容，依然能正常工作，不用单独处理单个字符的特殊情况。

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