如何使用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>