javascript - JavaScriptでのぼかしについて

Question

Web ページには 4 つの入力があります。要件は、ユーザーが 1 つの入力を埋めるとき、その値が 3 つの入力を埋め、3 つの入力色が 2 番目の入力と同じように赤に変わることです。しかし、1 つの入力を塗りつぶすと、4 つの入力の色が赤に変わります。

ここに例がありますhttp://jsfiddle.net/SXzyR/

<head>
<script type="text/javascript" src="jquery-1.7.2.js"></script>    
<script type="text/javascript">

$(function(){       
    $('input').blur(function(){         
        txtval()            
        })      
    })
</script>

<script type="text/javascript">    
function txtval(){      
    document.getElementById('myid3').value = document.getElementById('myid1').value;
    document.getElementById('myid4').value = document.getElementById('myid2').value;

    document.getElementById('myid3').style.color="#ff0000"
    document.getElementById('myid4').style.color="#ff0000"
}
</script>
</head>    
<body>
1
<input type="text" id="myid1" value="Enter name"/>
2
<input type="text" id="myid2" value="Enter name"/>
3
<input type="text" id="myid3" value="Enter name"/>
4
<input type="text" id="myid4" value="Enter name"/>
</body>

score 1 · Accepted Answer

これが簡単な解決策です。idイベントが発生した要素を確認しblur、対応する要素valueと色を更新します。

$('input').blur(function(){
    if (this.id == 'myid1') {
      $('#myid3').css('color', '#FF0000').val(this.value);  
    } else if (this.id == 'myid2') {
      $('#myid4').css('color', '#FF0000').val(this.value);
    }            
})

ここにフィドルがあります

score 0 · Accepted Answer

txtval() メソッドはすべての入力ぼかしイベントで呼び出され、メソッドは 2 番目の入力の強調表示を防ぐためにケースを処理しないためです。したがって、メソッドの 4 行すべてが実行されるため、4 番目の入力も色付けされます。

更新されたコードは次のとおりです: http://jsfiddle.net/SXzyR/

$(function(){

$('#myid1').blur(function(){
    $('myid3').value=$(this).value();
    $('#myid3').css('color','#FF0000') 

    });
$('#myid2').blur(function(){
    $('myid3').value=$(this).value();
    $('#myid4').css('color','#FF0000') 
    });

});

score 0 · Accepted Answer

inputこれは、 withのイベントハンドラーを追加したためです。いずれかまたはすべてのイベントで、 $('input')Which をtextval()呼び出す必要があります。できることは次のとおりです。blurinputs

textval()1)どちらを赤くするかを指定するパラメータを渡します。2）特定のイベントハンドラをアタッチして、赤くする必要がinputある他のものを指定できます...input

score 0 · Accepted Answer

次のように HTML コードを変更します。

1
<input type="text" id="myid1" value="Enter name" rel="myid3" />
2
<input type="text" id="myid2" value="Enter name" rel="myid4" />
3
<input type="text" id="myid3" value="Enter name"/>
4
<input type="text" id="myid4" value="Enter name"/>

ここにjsコードがあります

$(function(){

    $('input[rel]').each(function(){
       $(this).blur(function(){
           $("#" + $(this).attr("rel")).val($(this).val()).css('color','#FF0000') ;  
       });        
    });

})

ここに例がありますhttp://jsfiddle.net/SXzyR/2/

score -2 · Accepted Answer

このjsFiddleをチェックしてください...

http://jsfiddle.net/SXzyR/8/

問題は、ぼかし機能がすべての入力要素用だったためです.....

属性を変更または追加する必要がないように、コードを少し変更しました。条件を確認する必要があります

javascript - JavaScriptでのぼかしについて

5 に答える 5

Related

Reference