CODEWITHSUNDEEP
javascriptcss
noWayhome
noWayhome

Reputation: 668

My textarea text isn't styling the way that i would like it to CSS with javascript

I would like the text in the textarea to start off grey and turn to black after text has been entered. the text wont start off grey but if i click on it then off then on again it will be grey.

HTML code

<li class="message">
<textarea name="message" id="message_input" rows="4" cols="25" maxlength="200"
            onfocus="if(this.value=='Add additional information here!') 
            {this.value='';this.style.color='#000';}" 
            onblur="if(this.value=='') {
            this.value='Add additional information here!';this.style.color='#999';}"
            >Add additional information here!</textarea>
</li>

CSS code

li.message {
    position: absolute;
    top:255px;
    left: 150px;
    color: #999;
}

Upvotes: 0

Views: 105

Answers (3)

Josh Jones
Josh Jones

Reputation: 174

You could utilize jQuery to more easily manipulate the DOM, see this JsFiddle example where I am changing the text color depending on focus() and blur().

<li class="message">
    <textarea name="message" id="message_input" rows="4" cols="25" maxlength="200">Add additional information here!</textarea>
</li>

li.message {
    position: absolute;
    top:255px;
    left: 150px;
    list-style: none;
}

$(document).ready(function(){
    $('#message_input').focus(function(){ $(this).css('color','gray'); });
    $('#message_input').blur(function(){ $(this).css('color','black'); });
});

Upvotes: 1

mrtsherman
mrtsherman

Reputation: 39872

Try and avoid inline javascript declarations. It is also better to use classes to manage your style changes. Even this could be improved upon as I would like to see the default value stored and checked instead of checking the string each time. classList is not supported by IE7, but there are workaround if you must support it.

http://jsfiddle.net/bTRgz/1/

var textarea = document.getElementById('message_input');
textarea.onfocus = function() {
    if (this.value == 'Add additional information here!') {
        this.value = '';
        this.classList.add('active');
    }
};

textarea.onblur = function() {
    if (this.value == '') {
        this.value = 'Add additional information here!';
        this.classList.remove('active');
    }
}

Upvotes: 1

Diodeus - James MacFarlane
Diodeus - James MacFarlane

Reputation: 114347

Style the textbox, not the LI

li.message textarea {     
    color: #999;
}

Upvotes: 1

Related Questions