웹 프론트엔드 JS 튜토리얼 JS 작업 클립보드 코드 공유

JS 작업 클립보드 코드 공유

Feb 22, 2018 pm 03:53 PM
javascript 공유하다 클립보드

Javascript는 클라이언트 클립보드 내용을 쉽게 조작할 수 있지만, IE5 이상의 브라우저에만 적용 가능합니다. JavaScript는 window.clipboardData 개체를 사용하여 클립보드 내용을 처리할 수 있습니다. 클립보드에 저장할 setData(param1, param2) 메소드입니다. 이번 글은 주로 JS를 사용하여 클립보드 기능을 작동하는 방법을 소개하고, 필요한 친구들이 이를 통해 배울 수 있는 예제 코드를 공유합니다.

param1: 데이터 유형 텍스트 또는 URL 등

param2: 데이터 콘텐츠.

클립보드에서 데이터를 읽는 방법 getdata(param1)

데이터를 지우는 방법clearData(param1)


<HTML>  
<HEAD>  
<TITLE>测试操作剪贴板</TITLE>  
</HEAD>  
<script>  
function copyToClipboard()  
{  
 var d=document.all("source").value;  
 window.clipboardData.setData(&#39;text&#39;,d);  
}  
</script>  
<BODY>  
<button onclick="copyToClipboard();">拷贝</button>  
<input type="text" size=20 id="source" value="测试数据">  
<br>  
<button onclick="alert(window.clipboardData.getData(&#39;text&#39;));">显示</button>  
<button onclick="window.clipboardData.clearData(&#39;text&#39;);">清空</button>  
</BODY>  
</HTML>  

下面是另一个例子实现页面中选中字符,并拖拉到文本区功能。注意其中的window.event.dataTransfer对象也可处理剪贴板内容,不过只能用在 drag-and-drop 操作中。
<HTML>  
<HEAD>  
<TITLE>测试操作剪贴板2</TITLE>  
</HEAD>  
<script>  
function transferDrop() {  
   window.event.srcElement.innerText = window.event.dataTransfer.getData("text");  
   window.event.returnValue = false;  
}  
function transferDrag() {  
 window.event.dataTransfer.dropEffect = &#39;move&#39;;  
 window.event.returnValue = false;  
}  
</script>  

<BODY>
<p id="mySource" ondragstart="window.event.dataTransfer.effectAllowed = &#39;move&#39;;">选择我们并把我们拖到下面的textarea</p>  
<textarea id="myTarget" ondrop="transferDrop();" ondragover="window.event.returnValue = false;" ondragenter="transferDrag();">  
</textarea>
</BODY>  
</HTML>
로그인 후 복사

관련 권장 사항:

클립보드에 복사하는 JavaScript 방법 요약

HTML5 실제 전투 및 클립보드 이벤트 분석

javascript - HTML5 모바일 개발, 클립보드에 복사하는 방법은?

위 내용은 JS 작업 클립보드 코드 공유의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.

핫 AI 도구

Undresser.AI Undress

Undresser.AI Undress

사실적인 누드 사진을 만들기 위한 AI 기반 앱

AI Clothes Remover

AI Clothes Remover

사진에서 옷을 제거하는 온라인 AI 도구입니다.

Undress AI Tool

Undress AI Tool

무료로 이미지를 벗다

Clothoff.io

Clothoff.io

AI 옷 제거제

AI Hentai Generator

AI Hentai Generator

AI Hentai를 무료로 생성하십시오.

인기 기사

R.E.P.O. 에너지 결정과 그들이하는 일 (노란색 크리스탈)
4 몇 주 전 By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. 최고의 그래픽 설정
4 몇 주 전 By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. 아무도들을 수없는 경우 오디오를 수정하는 방법
4 몇 주 전 By 尊渡假赌尊渡假赌尊渡假赌
WWE 2K25 : Myrise에서 모든 것을 잠금 해제하는 방법
1 몇 달 전 By 尊渡假赌尊渡假赌尊渡假赌

뜨거운 도구

메모장++7.3.1

메모장++7.3.1

사용하기 쉬운 무료 코드 편집기

SublimeText3 중국어 버전

SublimeText3 중국어 버전

중국어 버전, 사용하기 매우 쉽습니다.

스튜디오 13.0.1 보내기

스튜디오 13.0.1 보내기

강력한 PHP 통합 개발 환경

드림위버 CS6

드림위버 CS6

시각적 웹 개발 도구

SublimeText3 Mac 버전

SublimeText3 Mac 버전

신 수준의 코드 편집 소프트웨어(SublimeText3)

Quark Netdisk를 Baidu Netdisk에 공유하는 방법은 무엇입니까? Quark Netdisk를 Baidu Netdisk에 공유하는 방법은 무엇입니까? Mar 14, 2024 pm 04:40 PM

Quark Netdisk와 Baidu Netdisk는 매우 편리한 저장 도구입니다. 많은 사용자가 이 두 소프트웨어가 상호 운용 가능한지 묻고 있습니다. Quark Netdisk를 Baidu Netdisk에 공유하는 방법은 무엇입니까? 이 사이트에서는 Quark 네트워크 디스크 파일을 Baidu 네트워크 디스크에 저장하는 방법을 사용자에게 자세히 소개합니다. Quark Network Disk에서 Baidu Network Disk로 파일을 저장하는 방법 방법 1. Quark Network Disk에서 Baidu Network Disk로 파일을 전송하는 방법을 알고 싶다면 먼저 Quark Network Disk에 저장해야 하는 파일을 다운로드한 다음 엽니다. Baidu 네트워크 디스크 클라이언트에서 압축 파일을 저장할 폴더를 선택한 다음 두 번 클릭하여 폴더를 엽니다. 2. 폴더를 연 후 창 왼쪽 상단에 있는 "업로드"를 클릭하세요. 3. 컴퓨터에 업로드해야 하는 압축 파일을 찾아 클릭하여 선택합니다.

NetEase Cloud Music을 WeChat Moments에 공유하는 방법_NetEase Cloud Music을 WeChat Moments에 공유하는 방법에 대한 튜토리얼 NetEase Cloud Music을 WeChat Moments에 공유하는 방법_NetEase Cloud Music을 WeChat Moments에 공유하는 방법에 대한 튜토리얼 Mar 25, 2024 am 11:41 AM

1. 먼저 NetEase Cloud Music에 들어간 다음 소프트웨어 홈페이지 인터페이스를 클릭하여 노래 재생 인터페이스로 들어갑니다. 2. 그런 다음 노래 재생 인터페이스에서 아래 그림의 빨간색 상자에 표시된 것처럼 오른쪽 상단에서 공유 기능 버튼을 찾아 공유 채널에서 공유 채널을 선택하고 다음 위치에서 "공유 대상" 옵션을 클릭합니다. 하단에서 첫 번째 "WeChat Moments"를 선택하면 WeChat Moments에 콘텐츠를 공유할 수 있습니다.

Baidu Netdisk에서 친구들과 파일을 공유하는 방법 Baidu Netdisk에서 친구들과 파일을 공유하는 방법 Mar 25, 2024 pm 06:52 PM

최근 Baidu Netdisk Android 클라이언트는 새로운 버전 8.0.0을 선보였습니다. 이 버전은 많은 변화를 가져올 뿐만 아니라 많은 실용적인 기능도 추가했습니다. 그 중 가장 눈길을 끄는 것은 폴더 공유 기능 강화다. 이제 사용자는 쉽게 친구를 초대하여 업무와 생활에서 중요한 파일을 공유하고 더욱 편리하게 협업하고 공유할 수 있습니다. 그렇다면 친구들과 공유해야 하는 파일을 어떻게 공유합니까? 아래에서 이 사이트의 편집자가 자세한 소개를 해줄 것입니다. 1) Baidu Cloud 앱을 열고 먼저 홈페이지에서 관련 폴더를 클릭한 다음 인터페이스 오른쪽 상단에 있는 [...] 아이콘을 클릭합니다(아래 참조). 2) 그런 다음에서 [+]를 클릭합니다. "공유 멤버" 열 ]을 선택하고 마지막으로 모두 확인합니다.

WebSocket 및 JavaScript: 실시간 모니터링 시스템 구현을 위한 핵심 기술 WebSocket 및 JavaScript: 실시간 모니터링 시스템 구현을 위한 핵심 기술 Dec 17, 2023 pm 05:30 PM

WebSocket과 JavaScript: 실시간 모니터링 시스템 구현을 위한 핵심 기술 서론: 인터넷 기술의 급속한 발전과 함께 실시간 모니터링 시스템이 다양한 분야에서 널리 활용되고 있다. 실시간 모니터링을 구현하는 핵심 기술 중 하나는 WebSocket과 JavaScript의 조합입니다. 이 기사에서는 실시간 모니터링 시스템에서 WebSocket 및 JavaScript의 적용을 소개하고 코드 예제를 제공하며 구현 원칙을 자세히 설명합니다. 1. 웹소켓 기술

망고tv 회원 계정공유 2023 망고tv 회원 계정공유 2023 Feb 07, 2024 pm 02:27 PM

Mango TV에는 다양한 유형의 영화, TV 시리즈, 예능 프로그램 및 기타 리소스가 있으며 사용자는 자유롭게 선택하여 시청할 수 있습니다. Mango TV 회원은 모든 VIP 드라마를 시청할 수 있을 뿐만 아니라 사용자가 드라마를 즐겁게 시청할 수 있도록 최고 화질을 설정할 수 있습니다. 아래에서 편집자는 사용자가 사용하고 서둘러 살펴볼 수 있도록 무료 Mango TV 멤버십 계정을 제공합니다. 구경하다. Mango TV 최신 회원 계정 무료 공유 2023: 참고: 이것은 최근 수집된 회원 계정이며 로그인하여 직접 사용할 수 있으며 비밀번호를 마음대로 변경하지 마십시오. 계좌번호: 13842025699 비밀번호: qds373 계좌번호: 15804882888 비밀번호: evr6982 계좌번호: 13330925667 비밀번호: jgqae 계좌번호: 1703

JavaScript와 WebSocket: 효율적인 실시간 일기예보 시스템 구축 JavaScript와 WebSocket: 효율적인 실시간 일기예보 시스템 구축 Dec 17, 2023 pm 05:13 PM

JavaScript 및 WebSocket: 효율적인 실시간 일기 예보 시스템 구축 소개: 오늘날 일기 예보의 정확성은 일상 생활과 의사 결정에 매우 중요합니다. 기술이 발전함에 따라 우리는 날씨 데이터를 실시간으로 획득함으로써 보다 정확하고 신뢰할 수 있는 일기예보를 제공할 수 있습니다. 이 기사에서는 JavaScript 및 WebSocket 기술을 사용하여 효율적인 실시간 일기 예보 시스템을 구축하는 방법을 알아봅니다. 이 문서에서는 특정 코드 예제를 통해 구현 프로세스를 보여줍니다. 우리

Discuz WeChat 공유가 표시되지 않는 문제 해결 Discuz WeChat 공유가 표시되지 않는 문제 해결 Mar 09, 2024 pm 03:39 PM

제목: Discuz WeChat 공유가 표시되지 않는 문제를 해결하려면 구체적인 코드 예제가 필요합니다. 모바일 인터넷의 발전으로 WeChat은 사람들의 일상생활에 없어서는 안될 부분이 되었습니다. 웹사이트 개발 시 사용자 경험을 개선하고 웹사이트 노출을 확대하기 위해 많은 웹사이트에 WeChat 공유 기능이 통합되어 사용자가 웹사이트 콘텐츠를 Moments 또는 WeChat 그룹에 쉽게 공유할 수 있습니다. 그러나 때때로 Discuz와 같은 오픈 소스 포럼 시스템을 사용할 때 WeChat 공유를 표시할 수 없는 문제가 발생하여 사용자 경험에 특정 어려움을 초래할 수 있습니다.

HP 프린터 드라이버의 두 가지 설치 방법 공유 HP 프린터 드라이버의 두 가지 설치 방법 공유 Mar 13, 2024 pm 05:16 PM

HP 프린터는 많은 사무실에서 필수적인 인쇄 장비입니다. 컴퓨터에 프린터 드라이버를 설치하면 프린터가 연결되지 않는 등의 문제를 완벽하게 해결할 수 있습니다. 그렇다면 HP 프린터 드라이버를 설치하는 방법은 무엇입니까? 아래 편집기에서는 두 가지 HP 프린터 드라이버 설치 방법을 소개합니다. 첫 번째 방법: 공식 웹사이트에서 드라이버를 다운로드합니다. 1. 검색 엔진에서 HP China 공식 웹사이트를 검색하고 지원 열에서 [소프트웨어 및 드라이버]를 선택합니다. 2. [프린터] 카테고리를 선택하고 검색창에 프린터 모델을 입력한 후 [제출]을 클릭하여 프린터 드라이버를 찾으세요. 3. 컴퓨터 시스템에 따라 해당 프린터를 선택합니다. win10의 경우 win10 시스템용 드라이버를 선택합니다. 4. 다운로드가 성공적으로 완료되면 해당 폴더에서 찾아보세요.

See all articles