创建表单输入的实时预览

Posted 2023-03-25

【中文标题】创建表单输入的实时预览

【英文标题】：Create Live Preview of Form Input

【发布时间】：2021-10-13 12:02:19

【问题描述】：

我正在尝试重新创建类似于 Create live preview of form inputs 的内容

我正在尝试创建输入到各种表单输入（文本区域、单选按钮、下拉菜单、图像上传等）中的值的实时预览。

我已尝试使用上述帖子中提供的代码 sn-p，但它似乎根本不适合我。

    /* script */

            <script>
          $(".import").keyup(function() 
            var $this = $(this);
            $('.' + $this.attr("id") + '').html($this.val());
          );
    </script> 

/* html output */
    <div id="preview">
          <div>Input 4: <span class="acf-field_60734728ddf2f"></span></div>
    </div>

/* form code */
    
    <div class="acf-field acf-field-text acf-field-60734728ddf2f is-required -r0" style="width: 50%; min-height: 98px;" data-name="actor_name_first" data-type="text" data-key="field_60734728ddf2f" data-required="1" data->
      <div class="acf-label">
        <label for="acf-field_60734728ddf2f">First Name <span class="acf-required">*</span></label></div>
      <div class="acf-input">
        <div class="acf-input-wrap"><input type="text" id="acf-field_60734728ddf2f" class="import import" name="acf[field_60734728ddf2f]" required="required"></div>
      </div>
    </div>

我在控制台中遇到 1 个错误：

TypeError: $ is not a function. (In '$(".import")', '$' is undefined)

这是一个运行 Elementor 的 WordPress 网站，所以我想知道这是否是某种冲突，我该如何解决？

【问题讨论】：

需要导入jquery才能使用上面的js代码。

包含 jQuery 的 Wordpress 模板通常使用 jQuery.noConflict()，因此请尝试包装您在 jQuery(function($) /* your code */) 中显示的内容

@charlietfl 成功了，谢谢！如果您现在可以通过页面上的表单以及在页面上的 iframe 中显示的表单输入的实时预览来帮助我实现这一点，是否可以加分？

如果您有后续问题，可以在网站上搜索答案，或提出新问题。请每个问题只讨论一个主题。

***.com/questions/68728921/…

【参考方案1】：

你可以在原版 javascript 中做这样的事情：

const paragraph = document.querySelector('p');
const input = document.querySelector('.input');

input.addEventListener('input', (event) => 
  paragraph.innerHTML = event.target.value;
);

<input class='input' type='text'>
<p></p>

【参考方案2】：

//it is necessary to check that jquery 
//<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
//was called earlier
<script>
  //and put in document ready
  $( document ).ready(function() 
    $(".import").keyup(function() 
      var $this = $(this);
      $('.' + $this.attr("id") + '').html($this.val());
    );
  );        
</script> 

【参考方案3】：

包含 jQuery 的 Wordpress 模板通常使用 jQuery.noConflict() 所以尝试包装你在 jQuery(function($) /* 你的代码 */) – @charlietfl

现在可以了，谢谢！

<script>
jQuery(function($)
    $( document ).ready(function() 
        $(".import").keyup(function() 
        var $this = $(this);
        $("." + $this.attr("id") + "").html($this.val());
        );
     );
);
</script>