用JS做复制网页表格内容和输入框内容功能

最新推荐文章于 2022-09-06 10:20:36 发布

chicheese

最新推荐文章于 2022-09-06 10:20:36 发布

阅读量1.3k

点赞数

分类专栏： JavaScript 文章标签： JS

本文链接：https://blog.csdn.net/qq_34828100/article/details/85288274

版权

JavaScript 专栏收录该内容

5 篇文章

订阅专栏

本文介绍了一种复制网页表格内容的方法，通过将表格数据拼接为字符串并利用input元素实现复制功能。同时，展示了复制输入框内容的简单示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

最近要求要做一个复制表格内容的功能，效果如下：

点击复制按钮，会出现下面的效果：

网上一些都是复制 input 框里的内容，这次做的是复制表格内容，记录一下做的功能，思路是把表格内要复制的内容拼接成一个字符串，再把这个字符串赋值给 input 框里的值，再就跟 input 框一样操作复制功能了，最后是隐藏复制的内容。

<div>
	<table id="tableId">
		<tbody>
			<tr>
				<td>第一行:</td>
				<td><span id="one">1111111111111111</span></td>
			</tr>
			<tr><td><br></td></tr>
			<tr>
				<td>第二行:</td>
				<td><span id="two">2222222222222222</span></td>  
			</tr>
		</tbody>
	</table>		
	<button id="copyButton"  onClick="copyTable()">复制</button>
</div>
<script type="text/javascript">  
		
	function copyTable(){
		var one = $("#one").text();
		var two = $("#two").text();
		var str = "第一行: " + one + ' \n ' + "第二行: " + two;
		var oInput = document.createElement('input'); 
		oInput.value = str; 
		document.body.appendChild(oInput); 
		// 选择对象
		oInput.select(); 
		// 执行浏览器复制命令
		document.execCommand("Copy"); 
		oInput.className = 'oInput';
		oInput.style.display='none';
	}
		
</script>

还有一个是复制 input 框里的内容

代码如下：


<p>点击复制后在右边textarea CTRL+V看一下</p>
<input type="text" id="inputText" value="测试文本"/>
<input type="button" id="btn" value="复制"/>
<textarea rows="4"></textarea>

<script type="text/javascript">
    var btn = document.getElementById('btn');
    btn.addEventListener('click', function(){
        var inputText = document.getElementById('inputText');
        var currentFocus = document.activeElement;
        inputText.focus();
        inputText.setSelectionRange(0, inputText.value.length);
        document.execCommand('copy', true);
        currentFocus.focus();
    });
</script>

以上是两种不同的用法。