angularJS-实现文本框的复制功能

最新推荐文章于 2024-09-01 08:39:46 发布

艾斯德斯的博客

最新推荐文章于 2024-09-01 08:39:46 发布

阅读量3.7k

点赞数

本文链接：https://blog.youkuaiyun.com/qq_36898102/article/details/78715996

版权

angularJs 专栏收录该内容

8 篇文章

订阅专栏

本文介绍了一个使用AngularJS实现的简单示例，该示例能够实现文本框内容的复制功能。通过AngularJS指令和事件处理，使得点击按钮即可复制指定文本框的内容。

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

<!DOCTYPE html>
<html ng-app="myPro">
	<head>
		<meta charset="UTF-8">
		<title>angularJS-实现文本框的复制功能</title>
		<script type="text/javascript" src="js/jquery-1.7.2.min.js" ></script>
		<script type="text/javascript" src="js/angular.min.js" ></script>
		<style>
			*{margin: 0;padding: 0;}
			ol,ul{list-style: none;}
			.box{width: 500px;height:150px;border: 1px solid gray;margin: 100px auto;padding-top: 20px;}
			.box input{width: 200px;height: 30px;height: 30px;}
			.box textarea{margin: 20px 0 0 20px;}
		</style>
	</head>
	<body ng-controller = "myProController">
		<div class="box">
			文本框：<input type="text" id="text"/>
			<button ng-click="copyText()">复制</button>
			<textarea  rows="4" cols="50"></textarea>
		</div>
	</body>
	<script>
		var pro  = angular.module("myPro",[]);
		pro.controller("myProController",["$scope",function($scope){
			//点击复制文本框内容
			$scope.copyText = function(evt) {
			  	var Url1=document.getElementById("text"); 
			  	console.log(Url1.value);
			  	Url1.select(); //选择对象  
			  	var tag = document.execCommand("Copy"); //执行浏览器复制命令  
			  	if(tag){
			  		alert("复制成功。")
			  	};
			};			
		}]);
	</script>
</html>