Expand textarea with Javascript style onClick

Question

Am trying to style my textarea with some JAVASCRIPT and CSS so when clicked it should change size expand to 120px height from 20px height by document.getElementById("tweet_area") but the textarea is expanding when you just made any click in the page not clicking the textarea. can one collect me on this am new to JavaScript

<script language="javascript">

      document.onclick=changeElement;

      function changeElement() {

          var textarea = document.getElementById("tweet_area");

          textarea.style.backgroundColor="#fff";
          textarea.style.width="565px";
          textarea.style.color="#000";
          textarea.style.height="120px";
          textarea.style.paddingLeft="1px";
          textarea.style.paddingTop="1px";
          textarea.style.fontFamily="Tahoma";
          textarea.style.fontSize="10pt";
          textarea.style.border="groove 1px #e5eaf1";
          textarea.style.position="inherit";
          textarea.style.textDecoration="none";  
      }

</script> 


<style type="text/css">
#tweet_area{
    width:565px;
    height:25px;
    overflow:hidden;
    margin:1px auto;
    font-family:Tahoma;
    font-size:10pt;
    font-weight:400px;
    color:#000;
    max-width:565px;
    min-width:565px;
    min-height:25px;
    max-height:120px;
    border:groove 1px #e5eaf1;
    padding-right:10px;
}
</style>

You can set event onfocus and onblur on the textarea, when a user uses tab to get into the textarea it'll still change it's style and when the user presses tab to leave the textarea it could change back. — HMR, Jun 03 '13 at 11:07
Not the problem (and probably won't cause any major error) but ` — andyb, Jun 03 '13 at 11:08
Do you want the `` to shrink again when the user clicks outside? — andyb, Jun 03 '13 at 13:27

nnnnnn · Answer 1 · 2013-06-03T11:11:32.607

You are applying your click handler to the whole document:

 document.onclick=changeElement;

...so that's why it responds to a click anywhere on the page. Try applying it just to the textarea:

  document.getElementById("tweet_area").onclick=changeElement;

Note that for document.getElementById() to find your element the script must run after the element has been parsed. So either place the script block after the element (at the end of the body is a good spot) or wrap your JS in a window.onload handler.

And though you didn't ask, if I may suggest: don't set all of those individual styles in your JS function - rather, create a class with those styles and just add the class in your JS.

No a suggestion always is better than answer cause i may do it right, anyway it didnt work am new to Javascript so where should i add and remove your code the code as well as remove — madcoder, Jun 03 '13 at 11:36

score 0 · Answer 2 · edited May 23 '17 at 12:11

0

I have write a jQuery code for TextArea resizing when user press Enter Key in TextArea. You can change that as for Click Event for TextArea.

Here is the post : https://stackoverflow.com/a/14211554

edited May 23 '17 at 12:11

Community

1
1

answered Jun 03 '13 at 12:02

Shrihari

1

Davor Zubak · Accepted Answer · 2013-06-03T13:37:14.647

Use CSS to style your textarea, no need for javascrcipt styling here. Prepare your style in CSS under a specific class and when you need to, you can add your element this class and its propeties. This is much cleaner solution. Use focus and blur events to get textarea element. Here is example.

HTML

<textarea rows="4" cols="50" id="txtArea">

<textarea>

JS

$(document).ready(function() {

    $('#txtArea').on("focus", function(event) {

        if(!$('#txtArea').hasClass('customTextAreaClass')){

            $('#txtArea').addClass('customTextAreaClass');

        }
    });

    $('#txtArea').on("blur", function(event) {

        if($('#txtArea').hasClass('customTextAreaClass')){

            $('#txtArea').removeClass('customTextAreaClass');

        }
    });
});

CSS

.customTextAreaClass{
    background-color: #fff;
    width: 565px;
    color: #000;
    height: 120px;
    padding-left: 1px;
    padding-top: 1px;
    font-family: "Tahoma", Geneva, sans-serif;
    font-size: 10pt;
    border: groove 1px #e5eaf1;
    position: inherit;
    text-decoration: none;  
}

it has worked but a little explanation on the css cos the text area now its not 545px width as i wish — madcoder, Jun 03 '13 at 12:32
this is just POC, customize your css as you wish. Create CSS for default state of textarea, and one CSS class for changed state, after click — Davor Zubak, Jun 03 '13 at 13:17
@madcoder did not mention using jQuery and you have not described how they might go about including that library (or even what it is). Also, the CSS is invalid. — andyb, Jun 03 '13 at 13:30

Expand textarea with Javascript style onClick

3 Answers3