如何检测是否输入了两个输入元素，如文本字段.(php / javascript)

How to detect if two input elements like text fields are typed in. (php/javascript)

本文关键字：输入 文本 字段 php 元素 javascript 何检测 检测 是否 两个      更新时间：2023-09-26

如果表单中有两个输入元素，例如文本字段，例如用户名和密码，获得长度> 0的文本输入，那么如何创建一个事件来在用户输入两个字段时改变提交按钮的颜色?

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

我喜欢上面的答案，如果你喜欢的话，这里有一个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");
    }
}

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

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

也可以通过

设置属性
Object.onChange = functionToCall();

onChange在输入值发生变化时触发它所设置的函数

如果您的项目中有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');
    }
});

这是正在运行的小提琴:

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");
  }
});

您可以使用以下逻辑

<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>
相关文章：