控制一个由脚本自动填充的输入

问题描述：

我有这个脚本来检查变量的值是否匹配隐藏输入的值并返回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' />

不要使用 “无功” 的任何东西，但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>

@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>

控制一个由脚本自动填充的输入

相关推荐