CODEWITHSUNDEEP
javascriptjqueryhtml
zaarr78
zaarr78

Reputation: 477

Custom placeholder in jquery

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');
        }

    })

Upvotes: 0

Views: 617

Answers (3)

epascarello
epascarello

Reputation: 207501

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>

Upvotes: 0

Rayon
Rayon

Reputation: 36609

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>

Upvotes: 1

user6748331
user6748331

Reputation:

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>

Upvotes: 0

Related Questions