如何在onkeypress触发的字母校验函数中向div追加元素

看了你的需求，核心是在输入非法字符时，给输入框所在的最近div追加错误提示图标，同时还要避免重复添加、合法输入时清除图标对吧？我帮你完善了原函数，解决这些问题：

完整实现代码 #

function onlyAlphabets(event) {
    var char = event.which;
    // 判断输入的是否为非字母（原逻辑排除了空格，若需允许空格可去掉`char != 32`）
    if (char > 31 && char != 32 && (char < 65 || char > 90) && (char < 97 || char > 122)) {
        console.log('only alphabets are allowed');
        console.log($(this).val());
        
        // 获取当前输入框所在的最近父级div
        var parentDiv = $(this).closest('div');
        
        // 关键：先检查是否已存在错误图标，避免重复追加
        if (!parentDiv.find('.fas.fa-times').length) {
            parentDiv.append('<i class="fas fa-times text-danger"></i>');
            // 可以给图标加样式类，比如text-danger让它显示红色，更醒目
        }
        
        // 阻止非法字符写入输入框
        return false;
    } else {
        // 输入合法字符时，移除可能存在的错误图标
        var parentDiv = $(this).closest('div');
        parentDiv.find('.fas.fa-times').remove();
    }
}

// 记得把函数绑定到目标输入框的keypress事件上
$('.your-input-class').on('keypress', onlyAlphabets);

关键细节说明 #

• 避免图标重复堆积：每次触发非法输入判断时，先通过find('.fas.fa-times').length检查父div里是否已经有这个错误图标，只有不存在时才追加，不然每输一次非法字符就多一个图标，体验很差。
• 合法输入时清除提示：当输入的是合法字母时，自动移除错误图标，让界面保持整洁。
• 阻止非法字符输入：最后return false会阻止浏览器把非法字符写入输入框，严格实现“仅允许字母输入”的要求。
• 空格控制：原代码里排除了空格（char != 32），如果你的场景需要允许空格输入，直接删掉这个条件即可。

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