JavaScript 운영 클립보드 구현 방법 소개

不言
풀어 주다: 2019-03-26 10:23:13
앞으로
3757명이 탐색했습니다.

이 글은 JavaScript 운영 클립보드의 구현 방법을 소개합니다. 도움이 필요한 친구들이 참고할 수 있기를 바랍니다.

js를 통해 클립보드의 복사, 잘라내기, 붙여넣기를 조작할 수 있습니다

사용된 메소드와 요소

DOM 요소

<textarea> </textarea>
<input>
로그인 후 복사

js 메소드

// 选中输入框中的所有文本
inputElement.select()

// 选中输入框中的部分文本
inputElement.setSelectionRange(start, end)

// 对选中的文本进行 复制 / 剪切 / 粘贴 操作
document.execCommand('copy/cut/paste')
로그인 후 복사

구현 원리

는 텍스트 영역 입력 입력을 조작하는 것입니다. js를 통해서는 input box만 조작할 수 있고 다른 요소는 조작할 수 없습니다.
모든 복사/잘라내기/붙여넣기 작업은 입력 상자에서 텍스트를 선택한 후 수행해야 합니다.

구체적인 예

보여줄 예를 작성하고

HTML

<label>测试内容:</label>
<textarea>ABCDEFGHIJKLMNOPQRSTUVWXYZ</textarea>
<textarea></textarea>
로그인 후 복사

js를 콘솔에서 직접 디버깅하세요

Shift + Enter를 사용하여 콘솔의 새 줄에 명령을 입력하세요

JS

// 选中文本
var text = document.querySelector('#text');
text.focus();
text.setSelectionRange(3,13);

// 操作文本
document.execCommand('cut')
로그인 후 복사

What 선택 후의 모습입니다

JavaScript 운영 클립보드 구현 방법 소개

자르기 작업을 수행한 후 수동으로 아래 입력창에 붙여넣으세요

JavaScript 운영 클립보드 구현 방법 소개

그렇습니다.

이 기사는 여기까지입니다. 더 많은 흥미로운 콘텐츠를 보려면 PHP 중국어 웹사이트의 JavaScript Video Tutorial 칼럼을 주목하세요!

위 내용은 JavaScript 운영 클립보드 구현 방법 소개의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

관련 라벨:
원천:segmentfault.com
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿