자바스크립트를 이용하여 텍스트 잘라내는 방법에 대해 알아 보겠습니다.
일전에 텍스트 복사하기관련 내용을 포스팅 한적이 있는데요. 크게 다르지 않습니다.
자바스크립트의 execCommand() 함수에 인자 값으로 'copy' 를 입력하여 선택한 값을 "복사하기" 기능을 적용 시켰던것과 같은 방법으로 이번에는 인자 값을 'cut' 을 입력하여 "잘라내기" 기능을 적용 시키면 됩니다.
위와 같이 문구 잘라내기 기능을 처리 하는 간단한 코드를 작성해 보겠습니다.
▶ HTML Code
.
1 2 3 4 5 6 7 | <body style="padding: 20px;"> <input type="text" id="inputField" value="James Dreaming tistory - Cut" style="width: 200px;"> <button onclick="cutText()">문구 잘라내기</button> <br><br> <p>※ 아래 input 필드에 붙여넣기 (Ctrl + v) 해보세요</p> <input type="text" style="width: 200px;"> </body> | cs |
▶ javascript Code
1 2 3 4 5 | var cutText = function(){ var textField = document.getElementById('inputField'); textField.select(); document.execCommand('cut'); } | cs |
cutText 함수가 호출 되면 id 값이 inputField 인 요소를 select 해서 해당 값을 'cut' 즉, 잘라내기 합니다.
그 이후 마우스 오른쪽 클릭 후 붙여넣기를 하거나 Ctrl + v 를 해서 붙여넣기를 하면 됩니다.
실행 결과는 아래와 같습니다.
※ 아래 input 필드에 붙여넣기 (Ctrl + v) 해보세요
▼ 도움이 되셨다면 로그인이 필요 없는 ▼
▼ 하트 클릭 한번 부탁 드립니다 ▼
감사합니다 :D
'javascript' 카테고리의 다른 글
| [ 자바스크립트 프로그래밍 ] 자바스크립트 타이머 setTimeout (1197) | 2018.08.01 |
|---|---|
| [ 자바스크립트 프로그래밍 ] 텍스트를 클립보드에 복사(copy)하기 (1168) | 2018.07.25 |
| [ javascript 코딩 ] 자바 스크립트 - 데이터 유형 (1207) | 2018.05.31 |
| [ javascript 코딩 ] Variable scope (1209) | 2018.05.23 |
| [ javascript 코딩 ] 자바스크립트 재미있게 배우는 사이트 (1528) | 2018.05.21 |
쉬운코딩이최고
Android, Java, jsp, Linux 등의 프로그래밍 언어를 소개 합니다.