javascript - jquery 中的自定义占位符

Question

我正在尝试在 jquery 中创建自定义 placeholder 因为我使用 contenteditable 属性。但由于某些原因我可以当我开始输入文本时删除占位符，但当我尝试删除文本时它不起作用。

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

    })

Answer 1

Use keyup/input event instead of keydown

与 keydown 中一样，当用户在 input-element 中输入某些内容时，comtenteditable 的值不会更新。

引用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>

keydown 出现问题，检查 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，使用 input 事件并使用 keyup 作为后备是更好的方法(考虑浏览器对 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>