Autoscale text input with JEditable.js?

Question

I've been looking for a script that combines the autoGrowInput with the JEditable but found none.

Answer 1

Use https://github.com/MartinF/jQuery.Autosize.Input initialized automatically via jEditable's event data:

jQuery(element).editable(save_fn, { 
    data: function(value,settings} { 
        var target = event.target; 
        window.setTimeout(function(){ 
            jQuery(target).find('input').autosizeInput(); 
        });
        return value;
    }
});

It's worth noting that this event (data) fires before the input element is actually created, hence the use of the timeout. There doesn't seem to be an event available at the present time for after the input has been created.

Answer 2

Actually I have created a plugin that does exactly that. You can check the demo and the documentation. I tried to make it very intuitive. It has ajax capabilities, using the RESTful philosophy. If you liked the animation effect on the autoGrowInput, it will be really easy to add it to the plugin just by changing the css file, using the transition property.

If I get people to like it, I may be able to improve and add more features to it. Hope it helps.