Question

我有一个包含一些可信任的div的表格：

<div contenteditable="true" class="change">

下面的JS代码会根据页面加载时的内容改变颜色。

但是我如何动态改变颜色并阻止用户写下除了你好，早安和再见之外的任何东西？如果将conotteditable字符串从goodmorning更改为hello然后单击该div的外部，我希望div的背景颜色和文本颜色从黄色变为绿色。

Javascript代码：

function coloring() {
$(document).ready(function(){
    $("td:contains(goodmorning)").css("background-color", "yellow").css("color", "yellow");
    $("td:contains(hello)").css("background-color", "green").css("color", "green");
    $("td:contains(goodbye)").css("background-color", "red").css("color", "red");

});

Answer 1

在选择输入上侦听更改事件，获取其值，然后使用CSS更改容器的颜色。

$('#colorChange').change(function(){
   var selectedColor = "red";
   $('#container').css('background-color', selectedColor);
});

您可以查看以下内容：$(this).val() 例如，创建一个Switch Case，根据div值

添加不同的颜色

Answer 2

你只需要html和javascript就可以了！

这是html代码：

<div id='div' contenteditable='true' oninput='change()'>

在这段代码中，我使用了id（div）和oninput属性，当用户更改该div中的任何内容时，每次触发javascript的change()函数。

这是javascript代码：

function change(){
var text=document.getElementById("div").innerHTML;
if(text=="hello"){
    document.getElementById('div').style.backgroundColor=("green");
    }
else{
document.getElementById('div').style.backgroundColor=("white");};
/*LIKE THIS, YOU CAN CODE MORE WHAT YOU WANT*/
};

JavaScript代码检测该div中写入的内容，并根据该代码更改div的背景颜色。

当值等于时，更改contenteditable div的颜色

2 个答案: