1. 首页
  2. 教程
  3. 高级教程

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

预览效果

预览地址:

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

主要操作步骤:

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

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

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

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

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

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

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

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

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

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

加载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】Axure引用JS案例-复制文本内容到剪贴板

案例

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

原型下载

立即下载

访问密码:8397

原创文章,作者:院长大大,如若转载,请注明出处:https://www.axureschool.cn/1365.html

发表评论

登录后才能评论

联系我们

在线咨询:点击这里给我发消息

邮件:fleede@163.com

工作时间:周一至周五,9:30-18:30,节假日休息