Question

我已经读过Why onchange doesn't work?，现在我知道了，

仅当用户更改输入。 如果更改输入，则不会触发 。

但是我有一个输入字段，当用户通过网站内的Google地图小部件更改位置时，该字段会自动填充。发生这种情况时，我想获取该自动填充的值并填充另一个输入字段。 以编程方式更改输入后，如何检测或触发功能？

Answer 1

要以编程方式更改输入标签中的值，可以使用triggers。

$(document).on('mytrigger keyup', '#input_num', function() {
  var value = $('#input_num').val();
  //alert(value);
  $('#result').val(value)
})

function external_modifier(){
  setTimeout(function(){
    var intValue = parseInt($('#input_num').val(), 10);
    $('#input_num').val(intValue+1).trigger("mytrigger");
    //alert(intValue);
    external_modifier();
  }, 3000);
}

external_modifier();

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<lable> Input: </lable><input id='input_num' type=text value=1 />

<br><br>

<lable> Result: </lable><input id='result' type=text disabled />

Answer 2

作为解决您的问题的方法，当用户通过Google地图小部件更改位置时，我们将以编程方式设置值，然后通过调用netsh interface portproxy add v4tov4 listenport=3340 listenaddress=10.1.1.110 connectport=3389 connectaddress=127.0.0.1手动触发输入更改事件。

例如，如果您的Google Maps代码是这样的。请检查功能代码$("#field-id").trigger("change");

HTML：

markerLocation

JS：

<!DOCTYPE html>
<html>
    <head>
        <style type="text/css">
          #map{ width:700px; height: 500px; }
        </style>
        <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js"></script>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
        <title>Save Marker Example</title>
    </head>
    <body>
        <h1>Select a location!</h1>
        <p>Click on a location on the map to select it. Drag the marker to change location.</p>

        <!--map div-->
        <div id="map"></div>

        <!--our form-->
        <h2>Chosen Location</h2>
        <form method="post">
            <input type="text" id="lat" ><br>
            <input type="text" id="lng" >
        </form>

        <script type="text/javascript" src="map.js"></script>
    </body>
</html>

Answer 3

您可以通过重写输入的value属性的setter函数来实现。因此，每次有人以编程方式设置value时，都会触发您覆盖的设置器：

const input = document.getElementById('input');

const descriptor = Object.getOwnPropertyDescriptor(Object.getPrototypeOf(input), 'value');

Object.defineProperty(input, 'value', {
    set: function(t) {
        console.log('Input value was changed programmatically');
        return descriptor.set.apply(this, arguments);
    },
    get: function() {
      return descriptor.get.apply(this);
    }
});

function changeInput() {
  input.value += '1';
}

<input id="input">
<button onclick="changeInput()">Change</button>

Answer 4

要以编程方式触发事件，可以使用Event API： https://developer.mozilla.org/fr/docs/Web/API/EventTarget/dispatchEvent

完整示例：

=INDEX($B$2:$B$8,MATCH(1,INDEX(($A$2:$A$8=A11)/($D$2:$D$8=B11),0),0))

=INDEX($C$2:$C$8,MATCH(1,INDEX(($A$2:$A$8=A11)/($D$2:$D$8=B11),0),0))

=INDEX($E$2:$E$8,MATCH(1,INDEX(($A$2:$A$8=A11)/($D$2:$D$8=B11),0),0))

let input = document.getElementById('a')

// Listen the event
input.addEventListener('change', function (evt) {
   console.log('onchange event listener')
});

input.onchange = () => {
console.log('onchange callback')
}

setTimeout(() => {
input.value = "myvalue"

// Trigger the event
var event = new Event('change');
input.dispatchEvent(event);

}, 1000)

Answer 5

检查下面的代码，此代码检查值的变化。

为了更好地理解，我们采用了两个示例，这两种情况都使用同一段代码。只是为了说明所编写代码的用法。

var executeChange = false;
var lastValue = '';
var lastValOfManualBox = '';
$(document).ready(function() {
  setInterval(function() {
    if (!executeChange) {
      $('#boxWithGoogleMapValue').val("value1");
      executeChange = true;
    } else {
      $('#boxWithGoogleMapValue').val("value2");
      executeChange = false;
    }
  }, 5000);
  setInterval(function() {
    if ($("#boxWithGoogleMapValue").val() != lastValue) {
      lastValue = $("#boxWithGoogleMapValue").val();
      //console.log(lastValue);
      $("#boxToBeChanged").val(lastValue);
    }
    if ($("#manualBoxWithGoogleMapValue").val() != lastValOfManualBox) {
      lastValOfManualBox = $("#manualBoxWithGoogleMapValue").val();
      //console.log(lastValOfManualBox);
      $("#manualBoxToBeChanged").val(lastValOfManualBox);
    }
  }, 500);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p>This boxes will be changing automatically every 5 seconds</p>
<input type="text" id="boxWithGoogleMapValue">
<br><br>
<input type="text" id="boxToBeChanged">

<p>The below boxes allow manual change(Enter values through keyboard)</p>
<input type="text" id="manualBoxWithGoogleMapValue">
<br><br>
<input type="text" id="manualBoxToBeChanged">

希望这会有所帮助。

Answer 6

我不确定如果 code 更改输入的值是否会触发任何事件。但是，您可以做的是运行一个间隔，该间隔不断地将输入的值与其先前的值进行比较，如果更改了该值，则会执行某些操作。

const inputBox = document.getElementById('my_input');
let previousValue = inputBox.value;
setInterval(() => {
  if (inputBox.value !== previousValue) {
    // fire change handler, then...
    previousValue = inputBox.value;
  }
}, 500);

Answer 7

有一个涉及MutationObserver的解决方案，但这意味着您将值设置为HTML属性（而不是通过DOM属性）：

const input = document.getElementById('input');

const observer = new MutationObserver(records => records.forEach(({
                attributeName,
                oldValue,
                target
            }) => console.log(`Input attribute ${attributeName} changed from ${oldValue} to ${target.getAttribute('value')}`)));
            
observer.observe(input, {
    attributes: true
});

// This programmatically changes the input value and fires a DOM mutation
input.setAttribute('value', 'attribute');

// This programmatically changes the input value but doesn't fire a DOM mutation
input.value = 'property';

<input id="input">

更多详细信息，请点击What is the difference between properties and attributes in HTML?

还有javascript use MutationObserver to detect value change in input tag

如果无法控制该值的设置方式，则可以在将输入字段传递给Google Maps小部件之前对其进行代理：

const input =  document.getElementById('input');

const handler = {
  set(obj, prop, value) {
    if (prop === 'value') {
      console.log(`Value changed to ${value}`);
      // Set the other input field to this value
    }
    obj[prop] = value;
  }
};

const proxifiedInput = new Proxy(input, handler);

// Pass the proxified input to the Google library instead of the native input

proxifiedInput.value = 'newValue';

<input id="input">

当以编程方式更改输入时，on更改解决方案不起作用

7 个答案: