與條件變化的div色值

-1

我需要幫助，我有div這樣與條件變化的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，而不是輸入表單，導致啓動不會改變我的文字背景顏色激活。所以我使用div。對不起我的英語很糟糕。

來源

2017-01-12 Wolfzmus

@PankajParkar：U似乎注意到我讀注意，我不能使用的輸入引起引導犯規讓我也創造新的風格。 – Wolfzmus

我建議您只使用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>

來源

2017-01-12 03:18:46 Deep

，但仍然是紅色時，我填充div和選擇另一個div :( – Wolfzmus

@ Wolfzmus你是否嘗試使用divs上面的邏輯??我想你的驗證發生模糊，然後我們可以修改上面的代碼 – Deep

哦耶這是我想要的!!完美!!!謝謝!! – Wolfzmus

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>

來源

2017-01-12 08:03:57

與條件變化的div色值

回答

相關問題