How to replace one html tag with another using Blaze?


Hey, I need to implement a feature that works like this:

  1. User has input field
  2. When he starts typing, I track if this text is overflown
  3. (What I need to implement) If text is overflown, input changes to textarea, and back if text is reduced, and afterall share the text between input and textarea

So far I have the following code:

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

The most obvious way I see to implement this feature is using Session, I have the following function:

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

So as you can see I calculate current sting’s length to see if it’s overflown. If I check Session variable in console, I can see that this calculation works the way I want, but input doesn’t transform to textarea when Session("multiple") equals true.
Where am I wrong? Or may be there are other ways to implement what I need?


  multiline: function () {
    return Session.get("multiline");
  'keyup .size' : function (evt, tmpl) {
    // Do stuff to Session.set('multiline', ...)


Thanks a lot man!

With your help I figured out how to accomplish it.
I kept html code the same and changed helper, my keyup function looks like this:

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