如何使用JavaScript創建CSS發光效果？

Question

我要做的是收集所有文本輸入字段並檢測它們是否有任何輸入的代碼。如果是這樣，我想要添加一個發光效果，如果它們留空或者他們刪除數據並將其保留爲空，我希望發光效果關閉。

迄今爲止，從我發現的這一切到目前爲止，這當然不起作用，但這是我可以嘗試合理化的最好方法。

function glow(){ 

     var text = document.getElementsByClassName('tex_inp01 tex_inp02'); 

     if (text.value ==null){ 
      text.style.boxShadow="#8fd7d2 0px 0px 22px"; 
      } 

     else 
      remove.style.boxShadow; 

     }/**function**/ 

我用.getElementsByClassName因爲getElementsById不支持多個ID，因爲它似乎，但如果有收集他們的另一種更有效的方式，所有請分享。

Answer 1

簡單的解決方案，可以將具有發光類的javascript：

var text = document.getElementsByClassName('tex_inp01 tex_inp02'); 
text[0].className = text[0].className + " glow"; 

DEMO

注：如果要煥發類添加到每個input，那麼你必須通過循環迭代併爲每個元素添加類。因爲文字是 HTMLCollection的元素。

Answer 2

jQuery的可以幫助你爲以下

<script src="//code.jquery.com/jquery-1.11.3.min.js"></script> 
<script> 
    $(document).ready(function() { 


     $(".MyInput").bind('keypress', function() { 
      $('.MyInput').css("boxShadow", "#8fd7d2 0px 0px 22px"); 
     }); 
     $(".MyInput").bind('keydown', function() { 
      if ($(".MyInput").val() == "") { 
       $('.MyInput').css("boxShadow", "none"); 
      } 
     }); 
    }); 
</script> 

HTML：

<input type="text" value="" class="MyInput" /> 

這個代碼僅聯機工作。如果你需要下載jQuery庫訪問這個 https://jquery.com/download/

Answer 3

你需要獲取每個元素的value，而不是HTMLCollection由document.getElementsByClassName返回; Array.prototype.forEach可以幫助這一點。然後，value不能是null，但是是空的。

編輯：等一下...你想要的發光效果，如果該元素具有一個輸入，對不對？那麼你的陳述是錯誤的。

這是正確的函數：

function glow() { 
    "use strict"; 
    Array.prototype.slice.call(document.getElementsByClassName("tex_inp01 tex_inp02")).forEach(function(a) { 
    if (a.value !== "") { 
     a.style.boxShadow = "0px 0px 22px #8fd7d2"; 
    } 
    else { 
     a.style.boxShadow = ""; 
    } 
    }); 
} 

Answer 4

如果你想驗證輸入，當用戶輸入，你可以用鍵盤事件來檢查輸入（S）的值：

document.querySelector('input[type="text"]').addEventListener('keyup', 
    function(event){ 
     var element = event.target; 

     if (element.value.trim() === '') { 
      element.classList.add('empty'); 
     } else { 
      element.classList.remove('empty'); 
     } 
}); 

查看小提琴例如：http://jsfiddle.net/LrpddL0q/。

否則，如果沒有addEventListener作爲一次性函數執行，則可以以相同的方式實現。

Answer 5

您在現有代碼中存在一些錯誤（如問題中所示）：（1）text.value ==null - 不檢查null，因爲輸入值永遠不會爲null。檢查它的長度。 （2）remove.style.boxShadow; - 我認爲這是一個錯字。它應該是text.style.boxShadow = 'none'。

..to被髮光效果添加，如果他們離開空或者刪除 數據，讓它空，我想爲光暈效果關閉..

您可以通過簡單地檢查值的長度來檢查輸入是否爲空。但是，檢查輸入是否已被輸入，然後刪除您將不得不保持一個標誌來跟蹤。您可以通過將change事件掛接到input s然後通過data屬性設置標記來完成此操作。稍後，當您檢查每個input以應用樣式時，還會檢查此屬性以查看input是否已被編輯出。

下面是一個簡單的例子放在一起所有上述（解釋代碼中的註釋）：

var inputs = document.getElementsByClassName("a b"), // returns a collection of nodelist 
 
    button = document.getElementById("btn");   // just for the demo 
 
    
 
button.addEventListener("click", checkInputs);  // handle click event on button 
 

 
[].forEach.call(inputs, function(elem) {    // iterate over all selected inputs 
 
    elem.addEventListener("change", function() {  // handle change event 
 
     this.setAttribute("data-dirty", true);  // set a data attribute to track.. 
 
    });            // .. a flag when it is changed 
 
}); 
 

 
function checkInputs() { 
 
    [].forEach.call(inputs, function(elem) {   // iterate over selected inputs 
 
     var isDirty = elem.getAttribute("data-dirty"); // check the dirty flag we set 
 
\t \t if ((elem.value.length > 0) || (isDirty)) { // if empty or changed 
 
      \t elem.style.boxShadow = "none";    // reset the style 
 
     } else { 
 
      elem.style.boxShadow = "#f00 0px 0px 5px"; // else apply shadow 
 
     } 
 
    }); 
 
}

<input class="a b" /><br /><br /><input class="a b" /><br /><br /> 
 
<input class="a b" /><br /><br /><input class="a b" /><br /><br /> 
 
<button id="btn">Check</button>