js对需要换行的文本进行复制

最新推荐文章于 2024-04-01 16:24:36 发布

七月′

最新推荐文章于 2024-04-01 16:24:36 发布

阅读量1.5k

点赞数 3

分类专栏：笔记文章标签： javascript html

本文链接：https://blog.csdn.net/weixin_46094786/article/details/117822213

版权

笔记专栏收录该内容

12 篇文章 1 订阅

订阅专栏

从输入框复制文本出来并且让文本呈现达到业务需求
首先需要一个textarea文本域和一个按钮
如果只是单纯的手动换行在文本域里

例子

<body>
    <textarea id="paycallback_url" class="form-control" readonly="readonly"style="resize: none; height:200px;width:100%;">
        11111111111111111111111111
        22222222222222222222222222
        33333333333333333333333333
        11221344444444444444444444
    </textarea>  
    <button id="CopyBtn">复制</button>
</body>
<script>
    document.querySelector('#CopyBtn').onclick = function () {
        var dd = document.querySelector('#paycallback_url');
        dd.select();
        document.execCommand("Copy");
        alert('复制成功');
    }
</script>

结果
在这里插入图片描述
因为代码里前面有空格所以复制出来也是有空格的

如果写成下面这样

<body>
    <textarea id="paycallback_url" class="form-control" readonly="readonly"style="resize: none; height:200px;width:100%;">
11111111111111111111111111
22222222222222222222222222
33333333333333333333333333
11221344444444444444444444
    </textarea>  
    <button id="CopyBtn">复制</button>
</body>
<script>
    document.querySelector('#CopyBtn').onclick = function () {
        var dd = document.querySelector('#paycallback_url');
        dd.select();
        document.execCommand("Copy");
        alert('复制成功');
    }
</script>

结果
在这里插入图片描述
可以达到没有空格的效果但是代码又不太舒服
并且我们的场景是需要后端动态传值的传过来的文本复制出来是不会换行的

例子

<body>
    <textarea id="paycallback_url" class="form-control" readonly="readonly"style="resize: none; height:200px;width:100%;"></textarea>  
    <button id="CopyBtn">复制</button>
</body>
<script>
    document.querySelector('#CopyBtn').onclick = function () {
        var dd = document.querySelector('#paycallback_url');
        dd.select();
        document.execCommand("Copy");
        alert('复制成功');
    }
    // 模拟数据
document.querySelector("#paycallback_url").value = `1111111111111111111111111/n22222222222222222222222222/r3333333333333333333333333311221344444444444444444444`;
</script>

结果
在这里插入图片描述

换行符和回车符都是没有效果的
最后我们通过ASCLL码来替代/n
例子

<body>
    <textarea id="paycallback_url" class="form-control" readonly="readonly"style="resize: none; height:200px;width:100%;">
    
    </textarea>  
    <button id="CopyBtn">复制</button>
</body>
<script>
    document.querySelector('#CopyBtn').onclick = function () {
        var dd = document.querySelector('#paycallback_url');
        dd.select();
        document.execCommand("Copy");
        alert('复制成功');
    }
    // 模拟数据
document.querySelector("#paycallback_url").value = "1111111111111111111111111" + String.fromCharCode(10) + "22222222222222222222222222/r3333333333333333333333333311221344444444444444444444";
</script>

在这里插入图片描述
完美达到预期效果
如果服务端是TP的话还可以更简洁

    <textarea id="paycallback_url" class="form-control" readonly="readonly"
    style="resize: none; height:200px;width:100%;opacity: 0;"
    >{$copyRow.id}&#10;{$copyRow.game_name}&#10;{$copyRow.sign_key}&#10;</textarea>

assign过来直接复制即可
如果发现文章有问题欢迎指正交流，看完点个赞一起学习一起进步，感谢大家的阅读~~

七月′

关注

3
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
js对需要换行的文本进行复制

从输入框复制文本出来并且让文本呈现达到业务需求首先需要一个textarea文本域和一个按钮如果只是单纯的手动换行在文本域里例子<body> <textarea id="paycallback_url" class="form-control" readonly="readonly"style="resize: none; height:200px;width:100%;"> 11111111111111111111111111 2222
复制链接

扫一扫