控制一個由腳本自動填充的輸入

我有這個腳本來檢查變量的值是否匹配隱藏輸入的值並返回confirmMessage。控制一個由腳本自動填充的輸入

var的值可能是由另一個腳本手動或自動填充的。

當它手動有一個結果，但是當輸入自動填充腳本我沒有確認消息。

<script> 
$('#vr').on('keyup change', function() { 
    var vr = document.getElementById('vr'); 
    var confirm_vr = document.getElementById('confirm_vr'); 
    var message = document.getElementById('confirmMessage'); 


    if(vr.value == confirm_vr.value){ 

     message.innerHTML = "MATCH"; 

    }else{ 

     message.innerHTML = "! Not match"; 

    } 
}); 
</script> 

<span id='confirmMessage' ></span> 

<input id='vr' name='vr' /> 

<input type='hidden' id='confirm_vr' name='confirm_vr' />

來源

2017-10-04 mehdi

不要使用「無功」的任何東西，但JS關鍵字。你在問這個問題。 – jmargolisvt

@jmargolisvt我認爲OP的意思是使用'cin.value'而不是'var.value'，它甚至會編譯瘋狂...... –

哪個腳本以編程方式改變文本字段？如果您需要在設置'input.value'後調用事件處理程序，則需要自行觸發更改事件。請參閱https://stackoverflow.com/questions/2381572/how-can-i-trigger-a-javascript-event-click/2381862#2381862 –

如何設置輸入值「自動使用腳本」？只是由document.getElementById('vr').value = 'hello'？作爲最簡單的解決辦法，我建議提取處理程序邏輯放到全局函數，並調用它，當你通過代碼改變輸入：

<script> 
    function processChange() { 
    var vr = document.getElementById('vr'); 
    var confirm_vr = document.getElementById('confirm_vr'); 
    var message = document.getElementById('confirmMessage'); 
    if(vr.value == confirm_vr.value){ 
     message.innerHTML = "MATCH"; 
    }else{ 
     message.innerHTML = "! Not match"; 
    } 
    }; 
    $(function() { 
    $('#vr').on('keyup change', processChange); 
    }); 
</script> 

<span id='confirmMessage' ></span> 
<input id='vr' name='vr' /> 
<input type='hidden' id='confirm_vr' name='confirm_vr' /> 

<script> 
    $(function() { 
    document.getElementById('vr').value = 'hello'; 
    processChange(); 
    }); 
</script>

來源

2017-10-04 20:33:39 dhilt

@mehdi有一種方法不僅可以訂閱DOM事件（keyup，change等），還可以訂閱某些實體的價值變化，例如，由[RxJs]（http://reactivex.io/rxjs/）的力量。也許它有一天會來找你，祝你好運！ – dhilt

這種方式的問題是設置輸入值的代碼必須知道更改的處理程序是什麼。更好的選擇是觸發一個綜合變化事件，這樣，如果有5個不同的處理程序，它們將被調用，並且不必擔心誰將變更事件連接起來 –

添加另一個答案，因爲@ dhilt的答案，您需要更改設置輸入代碼每當你添加一個新的監聽器的時候都會有值。

$('#vr').on('keyup change', function() { 
 
    var vr = document.getElementById('vr'); 
 
    var confirm_vr = document.getElementById('confirm_vr'); 
 
    var message = document.getElementById('confirmMessage'); 
 
    if(vr.value == confirm_vr.value){ 
 
     message.innerHTML = "MATCH"; 
 
    }else{ 
 
     message.innerHTML = "! Not match"; 
 

 
    } 
 
}); 
 

 
$('#vr').on('keyup change', (e) => { 
 
    // This will get called without the code that sets 
 
    // input.value having to know about this handler 
 
    console.log('Value changed', e); 
 
}); 
 

 
$('button').on('click', function() { 
 
    var vr = document.getElementById('vr'); 
 
    vr.value += 'X'; 
 
    // Notice that you don't need to know what handlers are set 
 
    $(vr).trigger('change'); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<input id ="vr"/> 
 

 
<span id='confirmMessage' ></span> 
 

 
<input id='vr' name='vr'> 
 

 
<input type='hidden' id='confirm_vr' name='confirm_vr' value="X"/> 
 

 
<hr /> 
 

 
<button>Set text value</button>

來源

2017-10-05 15:00:09

控制一個由腳本自動填充的輸入

回答

相關問題