javascript - 输入字段在收到值后不刷新

标签 javascript jquery html

从第一个输入字段收集数据并传送到第二个输入字段 2 的整个过程运行良好,但为了使值实际进入第二个输入字段,我必须从第一个输入字段中删除一些字母并重新- 输入一些数字,以便该值实际进入第二个输入。

怀疑的GIF。 enter image description here

    $(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 & 第二个输入代表这个字段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>

感谢您的帮助!

最佳答案

当 DOM 准备好时,你必须调用你的函数 onChange

onChange();

当您更新值时,触发 DOM 事件。

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

$(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);
        
});
<!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>

关于javascript - 输入字段在收到值后不刷新,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46748991/

相关文章:

javascript - 用新构造的 DOM 结构替换小部件元素

javascript - 使用 jquery 设置内部 iframe 内 div 的宽度 *无需* iframe 上有 id

javascript - 计算子弹轨迹的 x 和 y 坐标 - Chart.js

javascript - 如何防止在正文内容上滚动并在打开时启用在 Canvas 外导航上滚动?

html - 为什么我的 div 吞下了它之前的那个?

html - 活跃状态和专注状态之间的关系

javascript - 如何使用数据表在警报消息中获取多选列

javascript - 在 wordpress 中向自定义 php 模板添加 slider 的问题

javascript - 具有少量特殊字符的字符串的有效正则表达式

jquery - MVC3 - 如何维护回发时的选项卡索引