Remove placeholder on pressing tab button

Question

I have an textarea which is having a placeholder. To make work in internet explorer i have include placeholder.js. The thing i am facing the problem is when i pressing the tab key repeatedly when focus comes to text area the placeholder is not removing. How to do it ?

Here is my code..

HTML

<textarea name='body'  rows='2' cols='100' onkeydown="textCounter(document.wireForm.body,document.wireForm.remLen1,240)" onkeyup="textCounter(document.wireForm.body,document.wireForm.remLen1,240)" id="thewire_large-textarea" placeholder="<?php echo $msg;?>" ></textarea>

Jquery i tried

$('#thewire_large-textarea').keyup(function() {
    if (input.val() != "") {
        placeholder.hide();
    }
});

But still same thing. So how can we remove the placeholder on pressing the tab key.

You can do like this [Placeholder remove][1] [1]: http://stackoverflow.com/questions/9707021/how-do-i-auto-hide-placeholder-text-upon-focus-using-css-or-jquery — Greco Jonathan, May 27 '14 at 07:40
On pressing the `tab` is the thing buddy....its not working... — UI Dev, May 27 '14 at 08:11

Afzaal Ahmad Zeeshan · Accepted Answer · 2014-05-27T09:11:08.993

4

Wouldn't you be using the focus event. Because tab key triggers focus.

$('#thewire_large-textarea').focus(function() {
    if ($(this).val() != "") {
        $(this).attr('placeholder', ''); // remove the value of placeholder
    }
});

Secondly, you would be checking for current element's value right?

I have created a Fiddle for you, it would set the focus to the very first element. Which in that case is an input field. You can press tab, to move on to the textarea. And see how the placeholder was removed.

http://jsfiddle.net/afzaal_ahmad_zeeshan/SJ6wZ/

edited May 27 '14 at 09:11

answered May 27 '14 at 07:39

Afzaal Ahmad Zeeshan

15,669
12
55
103

**when focus comes to text area the placeholder is not removing** I am sure this means, `onfocus`. – Afzaal Ahmad Zeeshan May 27 '14 at 07:45

score 1 · Answer 2 · answered May 27 '14 at 10:12

solution of @Afzaal Ahmad Zeeshan works perfectly, upvote him of course. I just complete his post with this function below. When you tab on texarea and tab again you loose the placeholder, if you write something it's ok but if not placeholder did'nt come back add just this :

$('input').focus();
$('textarea').focus(function () {
    $(this).attr('placeholder', '');
});
//add this 
    $('textarea').blur(function () {
        $(this).attr('placeholder', 'Love for all, Hatred for none! :)');
    });

Remove placeholder on pressing tab button

2 Answers2