Javascript:如何更改 contenteditable div 占位符颜色

Question

我想使用 javascript 在事件触发时更改 contenteditable div 的占位符颜色。但是这个大家伙的 Javascript/Jquery 选择器是什么？

我试过:

$("#topic_content_input[data-placeholder]:not([data-div-placeholder-content]):before").css({"color":"blue"}); 

演示

<div id="topic_content_input" contenteditable="true" data-placeholder="I want to change my color on click " ></div>

<style>
    #topic_content_input[data-placeholder]:not([data-div-placeholder-content]):before {
        content: attr(data-placeholder);
        float: left;
        margin-left: 2px;
        color: rgba(134,134,134,0.6);
    }
</style>

Answer 1

您可以使用 JQuery 执行以下操作。使用 addClass。

jQuery(function($){
    $("#topic_content_input").click(function(){
        $(this).addClass('placeholder');
    });
});

.topic_content_input[data-placeholder]:not([data-div-placeholder-content]):before {
        content: attr(data-placeholder);
        float: left;
        margin-left: 2px;
        color: rgba(134,134,134,0.6);
    }
    
.placeholder[data-placeholder]:not([data-div-placeholder-content]):before {
    color: rgba(0,0,255,1);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="topic_content_input" class="topic_content_input" contenteditable="true" data-placeholder="I want to change my color on click " ></div>