Изменение цвета ДИВ с условием на значение

Question

мне нужна помощь, я имею div как этот

<div id="namacoc" tabindex="1" class="filled-text" placeholder="Input your name" contenteditable ></div> 
<div id="position" tabindex="1" class="filled-text" placeholder="Input your position" contenteditable></div>  
<button type="button" id="btncontinue" class="btn btn-wide btn-blue">Continue</button> 

мой porblem есть, я хочу проверить, что div как проверки. Пример: Если namecoc не имеет value. div namecoc вместо этого изменит цвет на red, когда namecoc имеет значение, которое будет изменено normal color (black), в то время как я выбрал другой div или нажмите кнопку.

ПРИМЕЧАНИЕ: Я использую div, а не форму ввода, потому что bootstrap не изменит мой цвет фона текста на активном. Поэтому я использую div. Извините, мой английский так плохо.

Answer 1

Я предлагаю вам использовать только input, у контента, редактируемого, есть свои проблемы с разными браузерами.

Попробуйте это.

$("#btncontinue").click(function() { 
 
    $("input").each(function() { 
 
    $.trim($(this).val()) == "" ? 
 
     $(this).addClass("invalid") : $(this).removeClass("invalid"); 
 
    }); 
 
}); 
 

 
$("input").on("blur", function() { 
 
    $.trim($(this).val()) == "" ? 
 
    $(this).addClass("invalid") : $(this).removeClass("invalid"); 
 
});

.invalid { 
 
    border: red 1px solid; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<input id="namacoc" tabindex="1" class="filled-text" placeholder="Input your name" contenteditable></input> 
 
<input id="position" tabindex="1" class="filled-text" placeholder="Input your position" contenteditable></input> 
 
<button type="button" id="btncontinue" class="btn btn-wide btn-blue">Continue</button>

Answer 2

Array.prototype.forEach.call(document.querySelectorAll(".filled-text"), function (node) { 
 
    node.onfocus = function() { 
 
    this.className += " active"; 
 

 
    var text = this.innerHTML; 
 

 
    if ((this.id === "namacoc" && text === "Input your name") || 
 
     (this.id === "position" && text === "Input your position")) { 
 

 
     this.innerHTML = ""; 
 
    } 
 
    }; 
 

 
    node.onblur = function() { 
 
    this.className = this.className.replace(" active", ""); 
 

 
    if (this.innerHTML === "") { 
 
     if (this.id === "namacoc") { 
 
     this.innerHTML = "Input your name"; 
 
     } else { 
 
     this.innerHTML = "Input your position"; 
 
     } 
 

 
     this.className = this.className.replace(" normal", "") + " empty"; 
 
    } else { 
 
     this.className = this.className.replace(" empty", "") + " normal"; 
 
    } 
 
    }; 
 
});

.filled-text { 
 
    width: 200px; 
 
    padding: 8px; 
 
    margin: 24px 0; 
 
    border: 1px solid #000; 
 
} 
 

 
.filled-text.placeholder { 
 
    color: #d0d0d0; 
 
} 
 

 
.filled-text.empty { 
 
    color: red; 
 
} 
 

 
.filled-text.active, 
 
.filled-text.normal { 
 
    color: #000; 
 
}

<div id="namacoc" class="filled-text placeholder" contenteditable>Input your name</div> 
 
<div id="position" class="filled-text placeholder" contenteditable>Input your position</div>