按下回車鍵提交基於標籤的表格

Question

我有一個基於標籤的搜索表單（就像您在Facebook或S/O上看到的基於標籤的文本框一樣，您輸入一個單詞並在鍵盤上按相應的分隔符鍵）

在我的網站上，您在文本字段中輸入一個單詞，然後按回車鍵確認或接受該關鍵字，從而使您可以輸入另一個關鍵字。

問題是，即使您可能已經完成輸入您的搜索查詢，按Enter鍵並未提交表單（顯然），因爲e.preventDefault（）已啓用，因此我可以使用輸入按鈕來接受/確認每個標籤。

我想要做的是，如果他們沒有輸入任何（或任何新的）標籤，而不是（雖然稍微）對用戶造成不便，但他們在按下回車鍵時提交表單。

我會盡力與此圖像更清楚地解釋它：

這會在所有的可能呢？

Answer 1

$("#tags").keyup(function(e){ 
    if (e.which === 13) { 
     if (/*value is not empty*/) { //add tag    
     } else { 
      $("#formID").submit(); 
     } 
    } 
}); 

我認爲這是你正在尋找

Answer 2

我的第一個建議是檢查狀態。例如，當他們正在選擇標籤的過程中，您可以將類.tagging添加到元素。當他們按輸入你可以檢查.tagging類是否在元素上。如果是，則最終確定標籤選擇並刪除該類。如果課程不在元素上，這意味着它們不是標記，因此您可以繼續並提交更改。

$("#tags").on("keypress", function(e){ 
    e.preventDefault(); 
    if (e.which === 13) { 
     if ($(this).is(".tagging")) { 
      /* Add tag, remove class */ 
     } else { 
      /* Submit data */ 
     } 
    } 
});