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

Question

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

只是为了澄清，我希望在"位置地址"中输入的值被传递到"位置名称"

<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>

Answer 2

您需要将jQuery代码封装在$(document).ready();中，以便jQuery绑定所有HTML元素。

更正的代码：

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

Answer 3

使用此

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