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

  • Z时代
  • 2024-01-10
  • 分类：问答

我有一个文本预览功能，它可以显示用户在输入样式CSS时输入的标题。当用户保存该页面时，关闭应用程序并稍后尝试编辑其文本，其保存的文本不会在加载页面时显示。在页面加载时触发Javascript文本和图片预览

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

默认文本：您的标题这里

用户节省了：我的水耕农场。

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

*

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

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

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

回答：

添加以下内容：

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

以上是 在页面加载时触发Javascript文本和图片预览 的全部内容， 来源链接： utcz.com/qa/266712.html

回到顶部