1

フォーム内の 2 つの入力要素 (たとえば、ユーザー名とパスワードなど) が長さ > 0 のテキスト入力を取得する場合、ユーザーが両方のフィールドに入力した瞬間に送信ボタンの色を変更するイベントをどのように作成しますか?

4

6 に答える 6

0

実行中のフィドルは次のとおりです。

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");
  }
});
于 2013-02-26T05:15:15.157 に答える
0

次のロジックを使用できます

<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>
于 2013-02-26T05:17:14.833 に答える
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
    }
};
于 2013-02-26T05:10:37.063 に答える
0

私は上記の答えが好きです。見た目が良い場合は、ここに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");
    }
}
于 2013-02-26T05:10:44.630 に答える
0

両方の入力の値が 0 より大きいかどうかをチェックする JavaScript 関数を作成し、0 より大きい場合は、呼び出されたときに送信ボタンの色を変更します。

input タグでonChange属性を使用し、javascript 関数の名前を属性に配置します。

次のようにして属性を設定することもできます

Object.onChange = functionToCall();

onChange は、入力値が変更されるたびに、設定されている関数を起動します。

于 2013-02-26T05:11:15.550 に答える
0

プロジェクトに 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');
    }
});
于 2013-02-26T05:12:52.077 に答える