Custom placeholder in jquery

Question

I'm trying to make a custom placeholder in jquery since I'm using a contenteditable attribute.But for some reasons I can remove the placeholder when I start typing text but it isn't working when I'm trying to remove the text.

HTML

<div class="FormDescriptionContainer">
    <div class="FormDescriptionPlaceholder">Iam a placeholder</div>
    <p class="FormDescription" contenteditable="true" ></p>
</div>

Jquery

$(".FormDescription").keydown(function(event) {
        $(".FormDescriptionPlaceholder").css('display', 'none');
        if($(".FormDescription").text().length<=0)
        {
            $(".FormDescriptionPlaceholder").css('display', 'block');
        }

    })

score 1 · Accepted Answer · edited May 23 '17 at 10:29

Use keyup/input event instead of keydown

As in keydown, value of comtenteditable is not updated when user has entered some content in input-element.

Refer onKeyPress Vs. onKeyUp and onKeyDown

$(".FormDescription").keyup(function(event) {
  $(".FormDescriptionPlaceholder").css('display', 'none');
  if ($(".FormDescription").text().length <= 0) {
    $(".FormDescriptionPlaceholder").css('display', 'block');
  }
})

.FormDescription {
  border: 1px solid black;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="FormDescriptionContainer">
  <div class="FormDescriptionPlaceholder">Iam a placeholder</div>
  <p class="FormDescription" contenteditable="true"></p>
</div>

Issue with keydown, check the current value printed in console,

$(".FormDescription").keydown(function(event) {
  console.log($(".FormDescription").text());
  $(".FormDescriptionPlaceholder").css('display', 'none');
  if ($(".FormDescription").text().length <= 0) {
    $(".FormDescriptionPlaceholder").css('display', 'block');
  }
})

.FormDescription {
  border: 1px solid black;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="FormDescriptionContainer">
  <div class="FormDescriptionPlaceholder">Iam a placeholder</div>
  <p class="FormDescription" contenteditable="true"></p>
</div>

IMO, going with input event and having keyup as fallback is better approach(considering browser support for input-event)

$(".FormDescription").on('input keyup', function(event) {
  $(".FormDescriptionPlaceholder").css('display', 'none');
  if ($(this).text().length === 0) { //length will never be less than 0
    $(".FormDescriptionPlaceholder").css('display', 'block');
  }
})

.FormDescription {
  border: 1px solid black;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="FormDescriptionContainer">
  <div class="FormDescriptionPlaceholder">Iam a placeholder</div>
  <p class="FormDescription" contenteditable="true"></p>
</div>

score 0 · Answer 2 · answered Aug 25 '16 at 14:48

Do not use keydown, nor keyup event. Use input event.

$(".FormDescription").on('input', function(event) {
        $(".FormDescriptionPlaceholder").css('display', 'none');
        if($(".FormDescription").text().length<=0)
        {
            $(".FormDescriptionPlaceholder").css('display', 'block');
        }

    })

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="FormDescriptionContainer">
    <div class="FormDescriptionPlaceholder">Iam a placeholder</div>
    <p class="FormDescription" contenteditable="true"></p>
</div>

score 0 · Answer 3 · answered Aug 25 '16 at 14:57

0

You can do it without JavaScript. You can use CSS to see if the element is empty and add text from an attribute.

div[contenteditable][placeholder]:empty:before {
    content: attr(placeholder);
    color: #CCCCCC; 
}

<div class="test" placeholder="TEXT HERE" contenteditable="true"></div>

answered Aug 25 '16 at 14:57

epascarello

204,599
20
195
236

Didn't know it was possible that way but can you center the cursor that way I mean if you have text-align:center on your div because it seems like the cursor stays at the start of the div. – zaarr78 Aug 25 '16 at 16:06
Use `div[contenteditable][placeholder]:not(:focus):empty:before` instead? – epascarello Aug 25 '16 at 16:24
It's working but now the placeholder disappear when focus the div. Instead of disappearing when starting typing text. – zaarr78 Aug 25 '16 at 16:52
One or the other :) or do it with JavaScript. – epascarello Aug 25 '16 at 16:53
Yeah I see thank you anyway it's a cool way to gonna add this to my list of css tricks :) – zaarr78 Aug 25 '16 at 16:54

Custom placeholder in jquery

3 Answers3