移动端JS Touchend事件失效问题及解决方案咨询

问题描述 #

我编写了一段JavaScript代码，需求为当用户点击逗号（,）键时，将输入框内的内容转换为标签。代码如下：

var tags = new Array();
document.addEventListener('touchend',function(e){
    if(e.which==',' || e.which=='188'){
        if($("#pre_tag").is(':focus')){
            var tagO = $("#pre_tag").val();
            tagO = tagO.replaceAll(',','');
            if(tagO!=''){
                if(tags.includes(tagO)==false){
                    tags.push(tagO);
                    $("#pre_tag").val('');
                    $("#tags").append('<button class="mb-2 mr-2 btn btn-light tagID" data="'+tagO+'">'+tagO+'<span class="badge badge-pill badge-light">x</span></button>');
                }else{
                    alert('This tag is already selected!');
                }
            }
        }
    }
});

但这段代码在手机上无法正常运行，希望该功能能在移动端正常工作。

问题原因 #

1. 事件选择错误：touchend是触摸屏幕结束的事件，和软键盘输入完全无关，移动端用户通过软键盘输入逗号时不会触发这个事件，自然无法执行后续逻辑。
2. 按键判断无效：e.which在触摸事件中没有对应键盘按键的有效值，无法正确判断是否按下了逗号键。

解决方案 #

方案1：监听键盘按键事件（keydown） #

将事件替换为keydown，直接监听键盘按键动作，同时优化按键判断逻辑：

var tags = [];
document.addEventListener('keydown', function(e) {
    // 匹配逗号按键，支持字符key和keyCode
    if ((e.key === ',' || e.keyCode === 188) && $('#pre_tag').is(':focus')) {
        e.preventDefault(); // 阻止逗号输入到输入框，省去后续替换步骤
        var tagO = $('#pre_tag').val().trim();
        if (tagO) {
            if (!tags.includes(tagO)) {
                tags.push(tagO);
                $('#pre_tag').val('');
                // 使用模板字符串简化HTML拼接，避免引号转义问题
                $('#tags').append(`<button class="mb-2 mr-2 btn btn-light tagID" data="${tagO}">${tagO}<span class="badge badge-pill badge-light">x</span></button>`);
            } else {
                alert('This tag is already selected!');
            }
        }
    }
});

方案2：额外监听输入事件（兼容特殊软键盘） #

部分移动端软键盘输入逗号时可能不会触发keydown事件，此时可以增加input事件监听，通过检测输入框内容中的逗号来触发标签转换：

// 监听输入框内容变化，兼容软键盘输入场景
$('#pre_tag').on('input', function() {
    var inputVal = $(this).val();
    if (inputVal.includes(',')) {
        var tagO = inputVal.replace(',', '').trim();
        if (tagO) {
            if (!tags.includes(tagO)) {
                tags.push(tagO);
                $(this).val('');
                $('#tags').append(`<button class="mb-2 mr-2 btn btn-light tagID" data="${tagO}">${tagO}<span class="badge badge-pill badge-light">x</span></button>`);
            } else {
                alert('This tag is already selected!');
                $(this).val('');
            }
        } else {
            $(this).val('');
        }
    }
});

关键修改点说明 #

• 替换事件类型：用keydown（键盘按键）和input（内容变化）替代touchend，贴合移动端软键盘输入的场景。
• 阻止默认行为：e.preventDefault()避免逗号被输入到框中，简化后续内容处理。
• 内容去空格：使用trim()处理标签内容，避免空格导致的无效标签或重复标签。
• 模板字符串：替代传统字符串拼接，让HTML代码更易读，避免引号转义错误。

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