Question

我正在追求的是一个代码，它将收集我的所有文本输入字段并检测它们是否有任何输入。如果是这样，我希望添加一个发光效果，如果它们被留空或删除数据并将其留空，我希望关闭发光效果。

到目前为止，我发现这是我到目前为止所提出的，当然它并不起作用，但它是我试图合理化的最佳方式。

def index
  @movies = Movie.order("vote_count DESC").paginate(....)
end

我使用了.getElementsByClassName，因为getElementsById似乎并不支持多个ID，但是如果还有另一种更有效的方式来收集它们，请分享。

Answer 1

简单的解决方案是添加带有javascript的发光类：

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

DEMO

注意：如果要为每个input添加glow类，则必须遍历循环并为每个元素添加类。因为文字是元素HTMLCollection。

Answer 2

您需要获取每个元素的value，而不是HTMLCollection返回的document.getElementsByClassName; Array.prototype.forEach可以为此提供帮助。然后，value不能为null，而是为空。

编辑等一下......如果元素有输入，你想要发光效果吗？然后你的if-else陈述是错误的。

这是正确的功能：

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 3

您的现有代码中存在一些错误（如问题中所示）:( 1）text.value ==null - 不检查null，因为输入值永远不会为空。检查它的长度。（2）remove.style.boxShadow; - 我认为这是一个错字。应该是text.style.boxShadow = 'none'。

..添加一个发光效果，如果它们留空或者删除了数据并保持空白我希望关闭发光效果..

只需检查值的长度，即可检查输入是否为空。但是，要检查输入是否已输入然后删除 ，您必须保留一个标记以跟踪该输入。您可以通过挂钩change上的input事件，然后通过data属性设置标记来实现。稍后当您检查每个input以应用某个样式时，以及length也会检查此属性以查看input是否已被删除。

以下是将上述所有内容放在一起的简单示例（代码注释中的解释）：

＆＃13;

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
		if ((elem.value.length > 0) || (isDirty)) {    // if empty or changed
         	elem.style.boxShadow = "none";             // reset the style
        } else {
            elem.style.boxShadow = "#f00 0px 0px 5px"; // else apply shadow
        }
    });
}

＆＃13;

<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>

＆＃13;

Answer 4

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 5

如果您想在用户输入时验证输入，可以使用键盘事件来检查输入值：

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作为一次性功能执行，可以采用相同的方式实现。

如何使用javascript创建css发光效果？

5 个答案: