Triggering Javascript Text and Pic Preview on page load

javascript jquery css

40 观看

1回复

183 作者的声誉

I have a text preview function which displays the title the user inputs with styled CSS, as they are typing. When the user saves the page, switches off the app, and tries to edit their text later, their saved text is not displayed on page load.

Only when a user presses a key does their saved text appear on screen.

Default text: YOUR TITLE HERE

User saves: My Hydroponic farm.

10 minutes later, user reloads page, sees:

Default text: YOUR TITLE HERE.

Presses a key, sees his saved text:

My Hydroponic Farm

The JS does not trigger until a key is pressed. It should trigger on page load.

  $(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;
});
});

*

The pic preview has the same problem. Saved pics are not displayed on page reload. Only the default placeholder jpgs are displayed.

 $(".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]);
  }
}

Is there a way to make both functions trigger on page load?

作者: RubyRube 的来源 发布者: 2017 年 12 月 27 日

回应 1


1

302 作者的声誉

Add the following:

$(function() {
    // Trigger events on load
    $(".pf_text_in").keyup();
    $(".pf_text_in2").keyup();
    $(".imgInp").change();
});
作者: Haroon R. 发布者: 2017 年 12 月 27 日
32x32