檢查輸入字段是否有切換某些類的值

我在我的meteor-app中有一個輸入字段，我想檢查是否有一些內容，因爲輸入字段的位置取決於輸入值或不。如果用戶開始輸入（至少一個字符），則輸入字段將移至頁面的頂部。檢查輸入字段是否有切換某些類的值

在我目前的解決方案中，我正在尋找一個keyup事件來檢查是否有值。如果有值，則會添加一個類並刪除另一個類。如果輸入字段爲空，則只是相反。

Template.search.events({ 
    'keyup input': function(event, template) { 
     if (event.target.value.length) { 
      $('#wrapper').addClass('top'); 
      $('#result').removeClass('hide'); 
     } 
     else { 
      $('#wrapper').removeClass('top'); 
      $('#result').addClass('hide'); 
     } 
    } 
});

我的問題

1）我認爲不是keyup事件的最好方式，用戶可以粘貼一些內容或削減它。 2）如果用戶鍵入'任何東西'，類將被改變8次 - 雖然你沒有看到，但它是非常不好的編碼，不是嗎？

3）如果我能避免多次循環，我可以用一個toggleClass ...

PS：也許是有用的，以節省一些信息，在會話變種？（我只是頭腦風暴）

來源

2015-09-26 user3142695

要處理您所在領域的剪切和粘貼操作而不需要要求該字段失去焦點，請使用input事件。您還可以使用jQuery的toggleClass簡化代碼：

Template.search.events({ 
    'input input': function(event, template) { // first input is the event, second is the object 
     var hasContent = event.target.value.length > 0; 
     $('#wrapper').toggleClass('top',hasContent); 
     $('#result').toggleClass('hide',!hasContent); 
    } 
});

來源

2015-09-26 23:42:35

要添加到這一點，如果你不希望觸發事件，每次用戶按下一個按鈕，你可以使用'lodash'或''underscore'時間debounce'方法分別設置爲「leadingEdge」或「immediate」。 – challett

檢查輸入字段是否有切換某些類的值

回答

相關問題