Question

如果表单中有两个输入元素 - 例如 - 文本字段，请说出用户名和密码，请输入长度为＆gt;的文本输入。 0，在用户在两个字段中输入的那一刻，您如何创建一个事件来更改提交按钮颜色？

Answer 1

document.getElementById('submit').onclick = function() {
    var inputs = document.getElementsByTagName('input'),
        empty = 0;

    for (var i = 0, len = inputs.length - 1; i < len; i++) {
        empty += !inputs[i].value;
    }
    if (empty == 0) {
        //write code for changing the button color
    }
};

Answer 2

我喜欢上面的答案，如果你喜欢看起来更好，这里有一个jquery答案！

$(document).ready(function() {
    $("#username").change(checkFunction());
    $("#password").change(checkFunction());
}
function checkFunction() {
    var user = $("#username").val();
    var pass = $("#password").val();
    if (user && pass) {
        $("#buttonid").css("background-color:#HEXCODE");
    }
}

Answer 3

创建一个javascript函数，检查两个输入的值是否大于零，如果这样做，则会在调用时更改提交按钮的颜色。

使用输入标记中的onChange属性，并将javascript函数的名称放在属性中。

您还可以通过执行

来设置属性

Object.onChange = functionToCall();

只要输入值发生变化，

onChange就会触发它设置的函数。

Answer 4

如果项目中有Jquery，可以尝试这样的事情：

假设您的输入有ID：

<input id="username" name="username"/>
<input id="password" name="password"/>
<input type="submit" value="Submit" id="submit" />

您可以绑定到任一输入元素上的keyup事件以更改按钮的颜色：

$('#username, #password').keyup(function(){
    if ($.trim($('#username').val()) != '' && $.trim($('#password').val()) != '') {
        $('#submit').css('background-color', 'red');
    }
});

Answer 5

这是小提琴：

<强> http://jsfiddle.net/NS5z6/

<强> HTML：

<input type=text id=username />
<input type=password id=password />
<input type=submit id=submit />

<强> CSS：

#submit{ background-color: red; }

<强> JS：

$('input[id="username"], input[id="password"]').change(function(){
  if ($(this).val()!="")
  { 
      $("input[id='submit']").css("background-color","green");
  }else{ 
      $("input[id='submit']").css("background-color","red");
  }
});

Answer 6

您可以使用以下逻辑

<input type = "text" name = "username" class = "text">
   <input type = "password" name = "password" class = "text">
   <input type = "button" class = "button">
   <script>
     $(".text").live("keyup", function(){

       var filled = true; 

       $(".text").each(function(i, v){
          if($(this).val() == ''){
             filled = false
          }
       });

       if(filled){
        $(".button").css("background-color:#black");
       }
     });
   </script>

如何检测是否输入了两个输入元素，如文本字段。（php / javascript）

6 个答案: