return FALSE; $r = well_tag_thread__update(array('id' => $id), $update); return $r; } function well_tag_thread_find($tagid, $page, $pagesize) { $arr = well_tag_thread__find(array('tagid' => $tagid), array('id' => -1), $page, $pagesize); return $arr; } function well_tag_thread_find_by_tid($tid, $page, $pagesize) { $arr = well_tag_thread__find(array('tid' => $tid), array(), $page, $pagesize); return $arr; } ?>jquery - How to stop focus() in custom js from scrolling to footer?

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

    最新消息：雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客
    你的位置： 首页>programmer>jquery - How to stop focus() in custom js from scrolling to footer?

    jquery - How to stop focus() in custom js from scrolling to footer?

    programmeradmin0浏览0评论

    I'm using a js to create a "copy to clipboard" button, using the following code from here:

    function copy(selector){
  var $temp = $("<div>");
  $("body").append($temp);
  $temp.attr("contenteditable", true)
       .html($(selector).html()).select()
       .on("focus", function() { document.execCommand('selectAll',false,null); })
       .focus();
  document.execCommand("copy");
  $temp.remove();
}

    I then load the script using the following:

    add_action( 'wp_enqueue_scripts', 'load_copy' );
function load_copy() {
    wp_enqueue_script('copyjs', get_template_directory_uri() . '/js/copy.js', array('jquery') );
}

    I then have a button setup to trigger this js onclick, to copy text from within a div element. The function works beautifully, except: because the js is loaded in the footer in WP, the focus() command causes the page to scroll to the bottom when the onclick event is triggered.

    I've tried using focus({preventScroll: true}) but then the function doesn't work, and I'm not savvy enough with js to figure out why.

    Does anyone have a solution to stop the page from scrolling?

    EDIT: adding the solution I'm now using, drawn from Veerji's answer below, with one change.

    function copyToClipboard(selector){
        var $temp = jQuery("<div>");
        jQuery("body").append($temp);
        $temp.attr("contenteditable", true)
            .html(jQuery(selector).html()).css('position', 'fixed').select()
            .on("focus", function() { document.execCommand('selectAll',false,null); })
            .focus().css('position', 'static');
        document.execCommand("copy");
        $temp.remove();
}

    I'm using a js to create a "copy to clipboard" button, using the following code from here:

    function copy(selector){
  var $temp = $("<div>");
  $("body").append($temp);
  $temp.attr("contenteditable", true)
       .html($(selector).html()).select()
       .on("focus", function() { document.execCommand('selectAll',false,null); })
       .focus();
  document.execCommand("copy");
  $temp.remove();
}

    I then load the script using the following:

    add_action( 'wp_enqueue_scripts', 'load_copy' );
function load_copy() {
    wp_enqueue_script('copyjs', get_template_directory_uri() . '/js/copy.js', array('jquery') );
}

    I then have a button setup to trigger this js onclick, to copy text from within a div element. The function works beautifully, except: because the js is loaded in the footer in WP, the focus() command causes the page to scroll to the bottom when the onclick event is triggered.

    I've tried using focus({preventScroll: true}) but then the function doesn't work, and I'm not savvy enough with js to figure out why.

    Does anyone have a solution to stop the page from scrolling?

    EDIT: adding the solution I'm now using, drawn from Veerji's answer below, with one change.

    function copyToClipboard(selector){
        var $temp = jQuery("<div>");
        jQuery("body").append($temp);
        $temp.attr("contenteditable", true)
            .html(jQuery(selector).html()).css('position', 'fixed').select()
            .on("focus", function() { document.execCommand('selectAll',false,null); })
            .focus().css('position', 'static');
        document.execCommand("copy");
        $temp.remove();
}
    • jquery
    Share Improve this question edited Dec 15, 2020 at 18:40 Jon Fergus asked Dec 11, 2020 at 23:23 Jon FergusJon Fergus 791 silver badge10 bronze badges
    Add a comment  | 

    1 Answer 1

    Reset to default 1

    In jQuery focus by default scroll the page to the element. If we use focus({preventScroll: true}) our copy function will not work as you mension. So I have use some css hack. See the following jQuery code.

    function copyToClipboard(selector, event){
    event.preventDefault();
    var $temp = jQuery("<div>");
    jQuery("body").append($temp);
    $temp.attr("contenteditable", true)
      .html(jQuery(selector).html()).css('position', 'fixed').select()
      .on("focus", function() { document.execCommand('selectAll',false,null); })
      .focus().css('position', 'static');
    document.execCommand("copy");
    $temp.remove();
}

    This is working fine for me.

    If you don't want to use this hack you can also use some pure javascript code. For example this

    与本文相关的文章

    发布评论

    评论列表(0)

    1. 暂无评论