javascript

[ 자바스크립트 프로그래밍 ] 텍스트 잘라내기 및 붙여넣기 (cut and paste)

쉬운코딩이최고 2018. 7. 26. 08:00



자바스크립트를 이용하여 텍스트 잘라내는 방법에 대해 알아 보겠습니다. 


일전에 텍스트 복사하기관련 내용을 포스팅 한적이 있는데요. 크게 다르지 않습니다. 


자바스크립트의 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


저작자표시 비영리 변경금지