2012-10-17 121 views
0

我的網頁有四個輸入。要求是當用戶填滿1個輸入時,它的值應該填入3個輸入,3個輸入的顏色應該變爲紅色相同的第二個輸入。但是當我們填充1個輸入,然後4個輸入顏色變爲紅色。模糊處理javascript

下面是一個例子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> 
+1

你爲什麼混合兩者的js和jQuery代碼。它看起來不錯 –

+0

@InternalServerError代碼不是網站中的可視元素。 – Joonas

+0

@Joonas我知道,我們應該鼓勵遵循編碼準則 –

回答

-2

支票本的jsfiddle ...

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

問題是監守你模糊功能是所有輸入元素.....

修改了一下你的代碼,所以你不必改變或添加任何屬性..絕對需要檢查的條件

+0

我選擇這個答案作爲最佳答案,因爲他確實改變了我的腳本 – Carlos

+0

謝謝....有趣的編碼.. :) – bipen

0

因爲txtval()方法被調用的所有輸入模糊事件和你的方法一點兒也不處理任何情況下,防止突出第二輸入。因此,您的方法中的所有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') 
    }); 

}); 
0

更改您的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/

+0

聽起來不錯! +1 :) – AdityaParab

0

那是因爲你已經添加的事件處理程序input$('input')這意味着textval()應在blur事件的任何調用/所有inputs ..你可以做的是

1)傳遞參數給textval()指明哪些變紅。 2)您可以將事件處理程序,特別input指定需要打開紅色其他input ...

1

這是一個簡單的解決方案。檢查該blur事件射擊元素的id,並更新相應的元素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); 
    }    
}) 

Here's a fiddle