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

Question

我在流星應用程序中有一個輸入字段，我想檢查是否有內容，因為輸入字段的位置取決於是否有輸入值。 如果用戶開始鍵入（至少一個字符），則輸入字段將移至頁面頂部。

在當前解決方案中，我正在尋找一個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）如果用戶鍵入“ anything”，則類將被更改8次-盡管您看不到，但這是非常糟糕的編碼，不是嗎？

3）如果可以避免多次循環，可以使用toggleClass ...

PS：在會話變量中保存一些信息也許有用嗎？ （我只是在集思廣益）

Answer 1

要在您的字段中處理剪切和粘貼操作而不要求該字段失去焦點，請使用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);
    }
});