CODEWITHSUNDEEP
jqueryhtmlcontenteditable
Mooseman
Mooseman

Reputation: 18891

Detect when contenteditable div has multiple lines of text

I am using a contenteditable on my page. When the user focuses the div, the height is set in js. (Needed to show buttons irreverent to the this issue) If the user types a significant amount of text, as to push multiple lines, it overflows the box and is hidden. How can I detect when additional lines are added or removed? Thanks!

HTML: <div id="edit" contenteditable="true">I can be edited.</div>

jQuery:

$("#edit").focus(function(){
    t=$(this);
    t.css('height',t.height()+10);
}).blur(function(){
    $(this).css('height','');  
});

Demo: http://jsfiddle.net/f8D4b/

Upvotes: 1

Views: 2203

Answers (2)

Mottie
Mottie

Reputation: 86433

Try this method, it sets the height to "auto" to override the css setting, then sets the height after each keyup event (demo):

$("#edit").on('focus keyup', function () {
    var t = $(this);
    t.css('height', 'auto');
    t.css('height', t.height() + 10);
}).on('blur', function () {
    $(this).css('height', '');
});

Upvotes: 2

Sandeeproop
Sandeeproop

Reputation: 1776

You don't need to detect when additional lines are added or removed, you just need to modify the following code.

$("#edit").focus(function(){
    t=$(this);
    t.css('min-height',t.height()+10);
}).blur(function(){
  $(this).css('min-height','');  
});

Check the update fiddle

Upvotes: 1

Related Questions