How to replace one html tag with another using Blaze?

help
1

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>
    {{else}}
        <input type="text" class="size" />
    {{/if}}
</div>

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

multiline: function () {
    Session.get("multiline");
    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?
Thanks!

2 

Template.templateName.helpers({
  multiline: function () {
    return Session.get("multiline");
  }
});
Template.templateName.events({
  'keyup .size' : function (evt, tmpl) {
    // Do stuff to Session.set('multiline', ...)
  }
});
1 Like
3

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 (event.target.scrollWidth > event.target.offsetWidth) {
    			Session.set("multiline", true)
    		}
    	}
1 Like