Question

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

我试过了：

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

演示

{{1}}

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>

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

1 个答案: