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

Question

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

Answer 1

如何设置输入值“使用脚本自动”？就靠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>    

Answer 2

添加另一个答案，因为@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>

​