CODEWITHSUNDEEP
javascriptjqueryhtmlplaceholder
Kala J
Kala J

Reputation: 2070

How can I make my placeholder show when the textarea is not selected?

Right now, I have a placeholder that appears in the background of my textarea when I click on the textarea to input text.

However, I want the placeholder to show even if I don't click inside the textarea. I just want the text to appear when the textarea is loaded?

Here's my main code for the placeholder: 

if (selectItem != null) {
            var notesContent = selectItem.description;
            var textarea;
            var browser = BrowserSide.BrowserCompatibility.GetBrowser();

            if (browser == "Explorer") {
                textarea = '<div class="light-list-box" style="padding:10px;width: 100%; height: 100%; border:none "><textarea id="notes-content" class="image-textarea" style="resize: none; width:85%; height:195px; overflow:auto" cols="5" rows="10" name="Note">{0}</textarea></div>';
            } else {
                var placeHolder = BrowserSide.GlobalObjects.getString("TextareaPlaceHolder");
                textarea = '<div class="light-list-box" style="padding:10px;width: 100%; height: 100%; "><textarea placeholder="' + placeHolder + '" id="notes-content" class="image-textarea" style="resize: none; width:85%; height:195px; overflow:auto" cols="5" rows="10" name="Note">{0}</textarea></div>';
            }

            if (notesContent != null && notesContent != '') {
                $('#notes-content').css('padding', '6px');
                textarea = BrowserSide.GlobalObjects.stringFormat(textarea, notesContent);
            }
            else { 
                 textarea = BrowserSide.GlobalObjects.stringFormat(textarea, '');
            }
            updateSelector();

            notes.html('');
            notes.append(textarea);
            notes.show();
        }
    };

How can I make my placeholder show when the textarea is not selected/clicked inside?

Upvotes: 0

Views: 191

Answers (3)

Santosh
Santosh

Reputation: 141

SIMPLE SOLUTION : DEMO at JSBin

    <textarea type="text" placeholder="enter your text" 
              onfocus="this.placeholder = ''" 
              onblur="this.placeholder = 'enter your text'">
    </textarea>

Upvotes: 1

01e
01e

Reputation: 701

a jquery solution: you can use .focus() and .blur() events to handle your content of your textarea:
so, when you focus, you don't need to display anything:

$('textarea').focus(function () {$(this).empty()});

and when you don't focus on it:

$('textarea').blur(function () {$(this).html('your placeholder...').css('color','gray');});

you can also check if user entered anything:

$('textarea').blur(function () {
     if ($(this).text().length == 0) 
         $(this).html('your placeholder...').css('color','gray');
});

NOTE: remember to set placeholder when document loaded. it's good to write a function for global use: http://jsfiddle.net/vesc1zLy/6/

Upvotes: 1

Diodeus - James MacFarlane
Diodeus - James MacFarlane

Reputation: 114347

You could use a positioned :after pseudo element:

.light-list-box {
    position:relative;
}

.light-list-box:after {
     position:absolute;
     top:0;
     left:0;
     content: 'your placeholder text'
}

Upvotes: 0

Related Questions