javascript - 在页面加载时触发 Javascript 文本和图片预览

Question

我有一个文本预览功能，可以在用户输入时显示用户使用样式化 CSS 输入的标题。当用户保存页面、关闭应用程序并稍后尝试编辑他们的文本时，他们保存的文本不会在页面加载时显示。

只有当用户按下某个键时，他们保存的文本才会出现在屏幕上。

默认文本:您的标题在这里

用户保存:我的水培农场。

10 分钟后，用户重新加载页面，看到:

默认文本:您的标题。

按下一个键，看到他保存的文本:

我的水培农场

在按下某个键之前，JS 不会触发。它应该在页面加载时触发。

  $(function() {
$(".pf_text_in").keyup(function() {
    var pf_text_in = $(this).val();
    $(".text_preview").html(pf_text_in);
    return false;
});
});

    $(function() {
$(".pf_text_in2").keyup(function() {
    var pf_text_in = $(this).val();
    $(".text_preview2").html(pf_text_in);
    return false;
});
});

*

图片预览有同样的问题。保存的图片不会在页面重新加载时显示。仅显示默认占位符 jpg。

 $(".imgInp").change(function() {
  readURL(this);
});

function readURL(input) {
  var $formPic = $(input).siblings('img');
  if (input.files && input.files[0]) {
    var reader = new FileReader();
    reader.onload = function(e) {
      $formPic.attr('src', e.target.result);
    };
    reader.readAsDataURL(input.files[0]);
  }
}

有没有办法让这两个函数在页面加载时触发？

Answer 1

添加以下内容:

$(function() {
    // Trigger events on load
    $(".pf_text_in").keyup();
    $(".pf_text_in2").keyup();
    $(".imgInp").change();
});