<!DOCTYPE html>
<html>
<head>
<title>TextArea Added Text</title>
<script>
function insertText(obj, txt){
var txtArea = document.getElementById(obj);
var txtValue = txtArea.value;
var selectPos = txtArea.selectionStart; // 커서 위치 지정
var beforeTxt = txtValue.substring(0, selectPos); // 기존텍스트 ~ 커서시작점 까지의 문자
var afterTxt = txtValue.substring(txtArea.selectionEnd, txtValue.length); // 커서끝지점 ~ 기존텍스트 까지의 문자
var addTxt = 'Added Text : ' + txt ;
txtArea.value = beforeTxt + addTxt + afterTxt;
selectPos = selectPos + addTxt.length;
txtArea.selectionStart = selectPos; // 커서 시작점을 추가 삽입된 텍스트 이후로 지정
txtArea.selectionEnd = selectPos; // 커서 끝지점을 추가 삽입된 텍스트 이후로 지정
document.getElementById(obj).focus();
}
</script>
</head>
<body>
<input type="text" id="addInput" value="Default Text">
<input type="button" onclick="insertText('txtForm', addInput.value)" value="추가하기">
<textarea id='txtForm' style="width:100%; height:300px;"></textarea>
</body>
</html>
Sample.html
