Question

从第一个输入字段收集数据并运送到第二个输入字段2的整个过程工作正常但是实际上该值转到第二个输入字段我必须从第一个输入字段中删除一些字母并重新输入 - 输入一些数字，使值实际上转到第二次输入。

怀疑的Gif。

    $(document).ready(function () {
      $(function () {
        var $cepAddressRouteTransporterGoogleMaps = $('#postal_code');
        var $cepAddressRouteTransporter = $('#cepAddressRouteTransporter');

        function onChange() {
          $cepAddressRouteTransporter.val($cepAddressRouteTransporterGoogleMaps.val());
        };

        $('#postal_code')
          .change(onChange)
          .keyup(onChange);
      });
    });

第一个输入代表此字段postal_code＆amp;第二个输入表示此字段cepAddressRouteTransporter。

<form action="transporter/route" method="post" role="form">
  <table id="address">
    <tr>
      <td class="label">Zip code</td>
      <td class="wideField">
        <input class="field" id="postal_code" name="postal_code">
      </td>
    </tr>
  </table>
  <div class="input-field col s6">
    <i class="material-icons prefix">directions</i>
    <input placeholder="Ex: 18214-780" id="cepAddressRouteTransporter" name="cepAddressRouteTransporter" type="text" class="validate">
    <label for="cepAddressRouteTransporter">CEP:</label>
  </div>
</form>

感谢您的帮助！

Answer 1

当DOM准备就绪时，你必须调用你的函数onChange

onChange();

更新值时，触发DOM事件。

$('#postal_code').trigger('change');

＆＃13;

$(function() {
    var $cepAddressRouteTransporterGoogleMaps = $('#postal_code');
    var $cepAddressRouteTransporter = $('#cepAddressRouteTransporter');

    function onChange() {
        $cepAddressRouteTransporter.val($cepAddressRouteTransporterGoogleMaps.val());
    };

    $('#postal_code').change(onChange).keyup(onChange);
        
    // fire as soon as DOM is ready
    onChange();
    
    var t = window.setInterval(function(){
        var n = Math.floor(Math.random() * 100000);
        $('#postal_code').val(n);
        
        // when you update the value, trigger the DOM event
        $('#postal_code').trigger('change');
    },1000);
        
});

＆＃13;

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
  <script
  src="https://code.jquery.com/jquery-3.2.1.min.js"
  integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
  crossorigin="anonymous"></script>
</head>
<body>

    <form action="transporter/route" method="post" role="form">
  <table id="address">
    <tr>
      <td class="label">Zip code</td>
      <td class="wideField">
        <input class="field" id="postal_code" name="postal_code" value="90210">
      </td>
    </tr>
  </table>
  <div class="input-field col s6">
    <i class="material-icons prefix">directions</i>
    <input placeholder="Ex: 18214-780" id="cepAddressRouteTransporter" name="cepAddressRouteTransporter" type="text" class="validate">
    <label for="cepAddressRouteTransporter">CEP:</label>
  </div>

</form>
    
</body>
</html>

＆＃13;

Answer 2

@code_monk感谢您的帮助，我重新设计了您的推荐并添加了一些新内容。

    $(function () {
      var $cepAddressRouteTransporterGoogleMaps = $('#postal_code');
      var $cepAddressRouteTransporter = $('#cepAddressRouteTransporter');

      function onChange() {
        $cepAddressRouteTransporter.val($cepAddressRouteTransporterGoogleMaps.val());
      };

      $cepAddressRouteTransporterGoogleMaps.change(onChange).keyup(onChange);
      $cepAddressRouteTransporter.change(onChange).keyup(onChange);

      onChange();

      var refresh = window.setInterval(function () {
        $cepAddressRouteTransporter.val($cepAddressRouteTransporterGoogleMaps.val());
      }, 3000);
    });

输入字段在接收值后不刷新

2 个答案: