【Axure JS】Axure引用JS案例-复制文本内容到剪贴板

预览效果

预览地址：

https://www.fleede.com/axure/axureschool/JS-CopyText/

主要操作步骤：

1、拖入一个多行文本框（文本、矩形、输入框也可以），命名为【输入框】（命名可随意主要用于识别好找）

2、拖入一个按钮，文字改为【点击复制】

3、选中按钮，新建交互动作：单击时-打开链接–链接到URL或文件路径，点击fx

4、添加局部变量，选择上面定义的多行文本框，此处是为了复制多行文本框的文字

5、将JS代码复制到函数区域，将下图代码替换为你命名的局部变量名称

6、点击预览查看效果，预览后点击复制按钮，然后Ctrl+V粘贴内容到文本框，即实现了复制粘贴的功能

加载JS代码：

javascript:
 function copyToClipboard(s) {
            if (window.clipboardData) {
                window.clipboardData.setData('text', s);
            } else {
                (function(s) {
                    document.oncopy = function(e) {
                        e.clipboardData.setData('text', s);
                        e.preventDefault();
                        document.oncopy = null;
                    }
                })(s);
                document.execCommand('Copy');
            }
        }
copyToClipboard('[[LVAR1]]');

以上为主要的操作步骤，可实现复制文本到剪切板的功能，根据各自需求可自行设计不同的样式和场景

典型场景：

分享链接，在各种协作类系统中会有分享链接的功能，点击按钮即可复制链接，然后分享给其他人

案例

【Axure案列】引用JS复制文本案列-Ant Design5.0常用颜色复制

原型下载

访问密码：8397