创建表单输入的实时预览答案

【问题标题】：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-width="50">
      <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 中显示的表单输入的实时预览来帮助我实现这一点，是否可以加分？
如果您有后续问题，可以在网站上搜索答案，或提出新问题。请每个问题只讨论一个主题。
stackoverflow.com/questions/68728921/…

标签： javascript jquery wordpress-theming advanced-custom-fields

【解决方案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>

【讨论】：