何かが入力に入力されるたびに機能を有効にするにはどうすればよいですか？

2つの入力ボックスの値を比較しようとしていますが、2つのボックスの値が等しくない場合は、ボックスの境界を変更します。私が抱えている問題は、入力欄の2つの値を比較するif文です。冒頭部分を除いて、等しくないことはありません。私はそれ自身を介して関数を実行し、私は自分の関数でsetTimeoutを実行し、500ミリ秒ごとにチェックします。どんな助けもありがとうと思います。私は朝起きるときに答えを見るでしょう。何かが入力に入力されるたびに機能を有効にするにはどうすればよいですか？

var passContext = $('#pass').val(); 
var pass2Context = $('#pass2').val(); 

     function checkMatch() { 
    if (passContext == pass2Context) { 
     if($('#passCont').css({borderWidth: 1})) { 
     $('#passCont').animate({ 
     borderWidth: 0 
     }, 400) 
     } 
     //Add button animation 
    } else { 
     $('#passCont').css({ 
     border: '0 solid red' 
     }).animate({ 
     borderWidth: 1 
     }, 400) 
     setTimeout(checkMatch, 2000); 
    } 
    } 

    checkMatch();

全コード：https://jsfiddle.net/yz6tgga7/

出典

2016-08-31 Joshua

しかし、あなたが提供してくれたフィドルで、あなたは 'change keyup paste'イベントを使っています..あなたの質問は誤解を招き混乱しています... – Rayon

両方の' input'に 'keypress'をバインドします –

' keyPress'関数はどこにも定義されていません – brk

私は変更しなければならなかったものを考え出しました。私の変数passContextとpass2Contextは、私のcheckMatch関数の中になければなりません。

出典

2016-08-31 05:09:40 Joshua

これはあなたが期待するものです。私のコードのロジックを取得します。

var passContext = document.getElementById('pass'), 
    pass2Context = document.getElementById('pass2'); 

function checkMatch() { 
    ... 
} 

passContext.addEventListener('input', checkMatch, false); 
pass2Context.addEventListener('input', checkMatch, false); 
passContext.addEventListener('keyup', checkMatch, false); 
pass2Context.addEventListener('keyup', checkMatch, false); 

// The third param on the addEventListener function is to disable the bubbling

jQueryを使って：あなたはjqueryのなしで入力イベントやkeyUpイベント

を使用することができます

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
\t <title></title> 
 
\t <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
 
</head> 
 

 
<style type="text/css"> 
 
.stl{ 
 
\t border:3px solid orange; 
 
} 
 

 
</style> 
 

 
<body> 
 
\t 
 
Fisrt :<input class="myinput" type="text" name="one" id="myone"> <br> 
 
Second :<input class="myinput" type="text" name="two" id="mytwo"> 
 

 

 

 
</body> 
 

 
<script type="text/javascript"> 
 
$(document).ready(function(){ 
 
    \t $(".myinput").on('change keyup keydown',function(){ 
 
    \t \t 
 

 
\t \t var theid = $(this).attr('id'); 
 
\t \t 
 

 
    
 
    if (theid == "myone") 
 
    { 
 
    \t //alert(theid); 
 
    \t var valone = $("#myone").val(); 
 
\t \t var valtwo = $("#mytwo").val(); 
 

 
\t \t if(valone != valtwo) 
 
\t \t { 
 
\t \t \t $("#mytwo").addClass("stl"); 
 
\t \t \t $("#myone").removeClass("stl"); 
 
\t \t } 
 
\t \t else 
 
\t \t { 
 
\t \t \t $("#myone").removeClass("stl"); 
 
\t \t \t $("#mytwo").removeClass("stl"); 
 
\t \t } 
 
    } 
 
    else 
 
    { 
 
    \t //alert(theid); 
 
    \t var valone = $("#myone").val(); 
 
\t \t var valtwo = $("#mytwo").val(); 
 

 
\t \t if(valtwo != valone) 
 
\t \t { 
 
\t \t \t //alert("not equal"); 
 
\t \t \t $("#myone").addClass("stl"); 
 
\t \t \t $("#mytwo").removeClass("stl"); 
 
\t \t } 
 
\t \t else 
 
\t \t { 
 
\t \t \t $("#myone").removeClass("stl"); 
 
\t \t \t $("#mytwo").removeClass("stl"); 
 
\t \t } 
 

 
    } 
 

 
\t \t 
 
    \t }); 
 
}); 
 

 
</script> 
 
</html>

出典

2016-08-31 05:23:55

ライブデモを参照してください

function checkMatch() { 
    ... 
} 
$('#pass, #pass2').on('keyup input', checkMatch);

出典

2016-08-31 05:26:12

何かが入力に入力されるたびに機能を有効にするにはどうすればよいですか？

答えて

関連する問題