非表单输入框禁用回车/逗号触发标签提交的JS实现方法

云上老周

2026-9-1

解决方案

实现思路

原有逻辑触发标签提交的路径有两个：

输入框失焦时自动校验输入内容并生成标签
监听keyup事件，检测到按下逗号（键码188）、回车键（键码13）时主动触发输入框失焦，完成标签提交
另外不在表单内的孤立输入框，在部分浏览器中按回车键会触发默认行为，可能导致意料外的提交。

要实现禁用逗号、回车触发提交的需求，仅需修改JavaScript逻辑，无需改动任何HTML、CSS代码，也不需要为输入框包裹表单结构：

删除原keyup事件中检测逗号、回车并主动触发失焦的逻辑，切断两个按键主动触发提交的路径
新增keydown事件监听，拦截回车键的默认行为，规避浏览器默认事件导致的异常提交
完整保留原有的失焦提交、点击删除标签的功能，不影响其他交互

修改后完整JavaScript代码

$(document).ready(function(){
  $(function(){ 
    $("#add-tag-input").on({
      focusout : function() {
        var txt = this.value.replace(/[^a-z0-9\+\-\.\#]/ig,''); // 限定允许输入的字符
        if(txt) $("<span/>", {text:txt.toLowerCase(), appendTo:"#tag-container", class:"dashfolio-tag"});
        this.value = "";
      },
      keydown : function(ev) {
        // 拦截回车键默认行为，避免异常提交
        if(ev.which === 13) {
          ev.preventDefault();
        }
      }
    });
    $('.tag-container').on('click', 'span', function() {
      if(confirm("Remove "+ $(this).text() +"?")) $(this).remove(); 
    });
  });
});