如何让JS大写转换功能仅作用于class为bottomtext的输入框？

有两种可行的方式实现仅对class为bottomtext的输入框应用大写转换：

方案一：在事件处理函数内添加类判断 #

修改你的handleInput函数，在执行转换逻辑前，先检查触发事件的元素是否包含bottomtext类，不包含则直接退出函数：

function handleInput(e) {
    // 检查当前元素是否有bottomtext类，没有则直接返回
    if (!e.target.classList.contains('bottomtext')) {
        return;
    }
    var ss = e.target.selectionStart;
    var se = e.target.selectionEnd;
    e.target.value = e.target.value.toUpperCase();
    e.target.selectionStart = ss;
    e.target.selectionEnd = se;
}

这种方法无需修改PHP绑定事件的逻辑，仅通过前端函数过滤即可实现需求。

方案二：仅给目标输入框绑定事件 #

调整PHP代码，只在class为bottomtext的输入框上添加oninput事件绑定，而非给所有输入框统一绑定：

假设你之前是给所有输入框批量设置oninput属性，现在改为仅针对带有bottomtext类的输入框添加该属性：

// 示例：仅为带有bottomtext类的输入框添加事件绑定
$inputAttributes = [];
// 根据你的业务逻辑判断当前输入框是否属于目标类
if ($isBottomTextInput) {
    $inputAttributes['oninput'] = 'handleInput(event)';
}
// 将属性数组应用到输入框的HTML生成逻辑中

这种方式更高效，不会给无关输入框绑定多余的事件监听，减少不必要的函数触发。

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