Question

我尝试在placeholder中制作自定义jquery，因为我使用contenteditable属性。但由于某些原因，我可以移除{{1}当我开始输入文字时，但当我试图删除文字时它不起作用。

HTML

placeholder

Jquery的

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

Answer 1

使用keyup/input事件代替keydown

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

参考onKeyPress Vs. onKeyUp and onKeyDown

＆＃13;

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

＆＃13;

.FormDescription {
  border: 1px solid black;
}

＆＃13;

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

＆＃13;

keydown问题，请检查console，

中打印的当前值

＆＃13;

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

＆＃13;

.FormDescription {
  border: 1px solid black;
}

＆＃13;

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

＆＃13;

IMO，参与input事件并以keyup作为后备是更好的方法（考虑浏览器对input-event的支持）

＆＃13;

$(".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');
  }
})

＆＃13;

.FormDescription {
  border: 1px solid black;
}

＆＃13;

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

＆＃13;

Answer 2

不要使用keydown，也不要使用keyup事件。使用输入事件。

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 3

你可以在没有JavaScript的情况下完成。您可以使用CSS查看元素是否为空并从属性添加文本。

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

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

jquery

3 个答案: