accessing innerHTML with jquery syntax

Question

I'm trying to have the text within this textarea disappear when a user clicks inside it:

HTML:

Details:<br><textarea rows = "9" cols = "35" id = "bigtext"> the more details the better </textarea>

Javascript/jquery:

<script type = "text/javascript">
$(document).ready(function(){
    $("#bigtext").focus(function(){
        $("#bigtext").hide().innerHTML; 
    });
});

This just hides the entire textarea and spoil the arrangement of other elements in the page... help please... what am I doing wrong?

Answer 1

You need to set the value of the textare as an empty string. You need to use .val() to set/get the value of form elements which includes textareas

$(document).ready(function () {
    $("#bigtext").focus(function () {
        $(this).val('');
    });
});

$("#bigtext").hide() hides the textarea itself, and it returns a jQuery object which does not have the innerHTML property so that part does not do anything

---

If you want to display a default text in the textarea, it will be better to use placeholder .