Change $(this) css property 'of focus alone' on click of selectected textarea

Question

I have the following HTML:

    <textarea class="new" id="1"></textarea>
    <textarea class="new" id="2"></textarea>

As well as this CSS:

.new {
    height:60px;     
}

.new:focus {
    height:80px;
}

When the textarea gains focus (the user clicks on or tabs to it) I want its height to be changed to 100px, but only if its value is a non-empty string. How can I achieve this?

Update::I want textarea to function like twitter

Thanks for reading

You want to use pseudo CSS class :focus or js/jquery focus handler? As when you click on element this bring it focus, why not only use CSS here? — A. Wolff, Sep 10 '13 at 15:09
@captain my code of jquery looks like this $('.new').live('keyup',function(){ if($(this).val().length>0){ — rickj, Sep 10 '13 at 15:10
@rickj You are confusing me, you talk about click event but seems to use keyup event. So what are you using and what are you expecting? — A. Wolff, Sep 10 '13 at 15:11
@ A. Wolff I have used that and its included in my code but the problem is , I want its height to be increased through out the page , when its length is > 0 — rickj, Sep 10 '13 at 15:11
I hope you have used twitter , in that when u click on tweet its textarea increases , I want to make it similar to that — rickj, Sep 10 '13 at 15:13
`live` is deprecated .Use Use `.on()` to attach event handlers — Deepak Ingole, Sep 10 '13 at 15:13
@captain dude I need to detect even length, so if length > 0 then height would be 100px else 60 px — rickj, Sep 10 '13 at 15:15
I've edited the question to make it clearer what is being asked. If I've misunderstood feel free to rollback to the previous edit. — Anthony Grist, Sep 10 '13 at 15:21

score 1 · Accepted Answer · edited May 23 '17 at 10:25

1

The following code will increase the height of a textarea if it is focused, and keep the increased height when loosing focus if its content is not empty.

//html
<div class="container">
    <textarea class="new" id="1"></textarea>
    <textarea class="new" id="2"></textarea>
</div>

//css
.new {
    height:20px;     
}
.new:focus, .new.notEmpty {
    height:80px;
}


//javascript
$('.container').on('change', 'textarea.new', function(){
    var notEmpty = $(this).val().length > 0;
    $(this).toggleClass('notEmpty', notEmpty);
});

fiddle

It is not recommended to use .live(), use event delegation instead.

$('.container').on('change', 'textarea.new', ... ) is an example of delegation. If you don't have any natural container to target, use $(document).on( ... ).

edited May 23 '17 at 10:25

Community

1
1

answered Sep 10 '13 at 15:09

LeGEC

46,477
5
57
104

+1 Works for me, I don't understand the point of increasing it to 100px however, I would just have one style for both rules: `.new:focus, .new.notEmpty { height:80px; }`, but my guess is this is because of OP requirements. – Curtis Sep 10 '13 at 15:21
@Curt: true, it's better to have one single rule to set the size. Updated the answer – LeGEC Sep 10 '13 at 15:27
@LeGEC thnks a lot , would u mind explaing the jquery part alone – rickj Sep 10 '13 at 15:31
var notEmpty = $(this).val().length > 0; $(this).toggleClass('notEmpty', notEmpty); what does this do – rickj Sep 10 '13 at 15:32

Change $(this) css property 'of focus alone' on click of selectected textarea

1 Answers1