如何实现输入框增减按钮功能调整字体大小无需输入px后缀

云上老周

2026-9-30

实现方案

你只需要修改原有JS逻辑，同时补充加减按钮的绑定事件即可，不需要改动现有HTML结构：

完整可直接使用的JS代码

// 通用工具方法：从输入框内容提取纯数字字号
function getSizeNum() {
    const inputVal = document.getElementById('textSizeInput').value;
    // 自动匹配输入内容里的数字部分，忽略px等无关后缀
    return parseInt(inputVal.match(/\d+/)[0]) || 12;
}

var changeTextSize = function () {
    console.log('in changeTextSize');
    const sizeNum = getSizeNum();
    // 自动拼接px后缀赋值给样式
    document.getElementById("showText").style.fontSize = `${sizeNum}px`;
    // 可选功能：把输入框内容统一格式化为带px的形式，方便直观确认单位
    document.getElementById('textSizeInput').value = `${sizeNum}px`;
}

// +10按钮点击逻辑
document.getElementById('addTen').addEventListener('click', function() {
    const currentSize = getSizeNum();
    // 这里加了最小值1的限制，避免字号变成负数出现异常，不需要可以直接删掉Math.max逻辑
    const newSize = Math.max(1, currentSize + 10);
    document.getElementById('textSizeInput').value = newSize;
    changeTextSize();
});

// -10按钮点击逻辑
document.getElementById('minusTen').addEventListener('click', function() {
    const currentSize = getSizeNum();
    const newSize = Math.max(1, currentSize - 10);
    document.getElementById('textSizeInput').value = newSize;
    changeTextSize();
});

// 原有绑定逻辑保留
document.getElementById('sizeChanger').onclick = changeTextSize;
document.getElementById('textSizeInput').onchange = changeTextSize;