代码之家  ›  专栏  ›  技术社区  ›  willy wonka

用javascript复制选定的输入框无法正常工作

  •  3
  • willy wonka  · 技术社区  · 6 年前

    对于我的编程文化,我正在尝试使用音频html标记和音频源,以及操作系统剪贴板。三天来,我试图解决以下问题。

    我在服务器上有一个带有js的html页面,其中包含一堆代码。

    文本输入:

    <input type="text" id="titleToCopy" value="" />
    
    and a button:
    
        <input type="button" value="Copy" onclick="copyTitleOnClipboard()"/>
    
    
    Into the js code there are also these two functions
    
    function execThings() //This execute some operations and also calls other functions
    {
        console.log(arguments.callee.name);
        var dest = document.getElementById(myplayerID); // Gets my player by its ID
        var osrc = getOriginalPlayer().src;
        dest.src = osrc;
        updateTitleToCopy();
        copyTitleOnClipboard();
        stopOriginalPlayer();
    }
    
    
    function copyTitleOnClipboard() // This function select and copies to the Operative System clipboard the content of the related text input
    {
        console.log(arguments.callee.name);
        var titleInput = document.getElementById("titleToCopy");
        titleInput.focus(); // The function works good with or without this line
        titleInput.select();
    
        var r = document.execCommand("copy");
        r = r === true ? "has been" : "not";
    
        console.log("Title " + r + " copied to clipboard");
    }
    

    出于调试目的,我在这两个函数中都添加了

    console.log(arguments.callee.name);
    

    • 如果我点击按钮 单击 执行输入值并将其复制到操作系统剪贴板。
    • 如果我手写函数名 在googlechrome控制台中也可以使用。

    对我来说这意味着 复制剪贴板() 功能本身正常工作。事实上,在这两种情况下,我都会在控制台上得到调试反馈,这要归功于行:

    console.log("Title " + r + " copied to clipboard");
    

    按预期返回输出

    如果我将剪贴板的内容粘贴到其他地方(例如记事本),结果就是文本框输入的值,如预期的那样。

    问题是当执行是由于另一个函数 ,称为 复制剪贴板() 功能,它不再工作了 复制剪贴板() 标题未复制到剪贴板

    • 为什么打电话给 复制剪贴板() 来自另一个函数的函数不会像我通过点击按钮或通过Chrome控制台手动调用它那样工作?
    • 我该如何解决这个问题?

    2 回复  |  直到 6 年前
        1
  •  0
  •   dj079    6 年前

    我可以复制你面临的问题。

    https://jsfiddle.net/t1pe6zw8/

    打开这个链接,等待5秒钟,看看会发生什么。

    以下是对这种行为的解释:

    execThings() 函数由用户操作未引发的事件触发。

    基本JS方法document.execCommand命令(),要求由用户触发 交互以防止网页与剪贴板发生冲突 在用户不知情的情况下。这是一个安全功能,是 由每个浏览器强制执行。

    $(document).ready(function(){
        setTimeout(function(){ execThings(); }, 5000);
    });
    

    execThings() 函数在5秒后运行,由于它是在没有用户操作的情况下触发的,因此无法复制文本。

    Click Me to Exec Things 按钮,它会触发相同的 execThings() 函数,并且可以复制文本。

    https://developer.mozilla.org/en-US/docs/Web/API/Document/execCommand#Return_value

    希望这有帮助!

        2
  •  0
  •   Saif Taher    6 年前

    copyTitleOnClipboard() 具有 execThings() onclick="copyTitleOnClipboard()" 按钮的。。。。而且工作正常, execThings() 复制剪贴板() 输入框的值被复制到剪贴板,我验证了。。。

    //some other code 评论。请在问题代码之外加上那个代码,因为我认为有些东西把问题搞砸了 execThings() 功能。