javascript - 使用 Jquery Keyup 函数将变量从一个输入字段传递到另一个输入字段

Question

我正在尝试使用在另一个字段(位置地址)中输入的值自动填充输入字段(位置名称)。我到处都在网上查看并设法使 JS 片段在一个简单的示例上工作，但由于某种原因，这不适用于以下 php 代码。

澄清一下，我希望将“location-address”中输入的值传递给“location-name”。

<script>
    $('#location-address')
        .keyup(function() {
            var value = $(this).val();
            $('#location-name').text(value);
        })
        .keyup();
</script>

<tr class="em-location-data-name">
    <th style="padding-top: 14px;">
        <?php _e ( 'Event unique identifier:', 'dbem' )?>
    </th>
    <td>
        <input id="location-name" type="text" name="location_name" />
    </td>

</tr>
<tr class="em-location-data-address">
    <th style="padding-top: 14px;">
        <?php _e ( 'Address:', 'dbem' )?>&nbsp;</th>
    <td>
        <input id="location-address" type="text" name="location_address" value="<?php echo esc_attr($EM_Location->location_address, ENT_QUOTES); ; ?>" />
    </td>
</tr>

Answer 1

首先，您的代码需要放在 document.ready 处理程序中。其次，您需要使用 val() 而不是 text() 来设置 input 字段的值。

$(function() {
    $('#location-address').keyup(function() {
        var value = $(this).val();
        $('#location-name').val(value);
    }).keyup();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tr class="em-location-data-name">
    <th style="padding-top: 14px;">
      <?php _e ( 'Event unique identifier:', 'dbem' )?>
    </th>
    <td>
      <input id="location-name" type="text" name="location_name" />
    </td>
  </tr>

  <tr class="em-location-data-address">
    <th style="padding-top: 14px;">
      <? php _e( 'Address:', 'dbem') ?>&nbsp;
    </th>
    <td>
      <input id="location-address" type="text" name="location_address" value="<?php echo esc_attr($EM_Location->location_address, ENT_QUOTES); ; ?>" />
    </td>
  </tr>
</table>