2016-11-18 97 views
0

我需要實現一個功能,它的工作原理是這樣的: 1.用戶有input場 2.當他開始打字,我跟蹤如果文本溢出 3.(我需要實現)如果文本溢出,input變化textarea,和回來,如果文本減少,畢竟分享inputtextarea之間的文本是什麼流星+火焰,更換一個HTML標籤到另一個

到目前爲止,我有以下代碼:

<div class="container"> 
    {{#if multiline}} 
     <textarea class="size"></textarea> 
    {{else}} 
     <input type="text" class="size" /> 
    {{/if}} 
</div> 

最明顯的方式,我看到了實現此功能使用Session,我有以下功能:

multiline: function() { 
    Session.get("multiline"); 
    if ($(".size > input").prop('scrollWidth') > $(".size > input").width()) { 
    Session.set("multiline", true); 
    } else { 
    Session.set("multiline", false); 
    } 
} 

因此,大家可以看到我計算當前刺的長度,看看它是否溢出。如果我在控制檯中檢查Session變量,我可以看到該計算按我想要的方式工作,但當Session("multiple")等於true時,input不會轉換爲textarea。 我錯在哪裏?或者可能有其他方法來實現我所需要的? 謝謝!

回答

0

這很容易。我保留HTML並將邏輯分爲helpersevents。 我的新multiline助手看起來是這樣的:

multiline: function() { 
    return Session.get("multiline"); 
    } 

而且我添加了一個事件Template.body.events看起來像這樣:

"keyup .size": function (event, template) { 
     if (event.target.scrollWidth > event.target.offsetWidth) { 
      Session.set("multiline", true) 
     } 
    } 

工作就像一個魅力。