JavaScript에서 텍스트 영역 값 가져오기
Muhammad Muzammil Hussain
2023년10월12일
웹 개발에서는 대부분 HTML DOM 문서 및 기타 라이브러리를 사용하여 텍스트 영역 값을 읽고 가져와야 합니다. JavaScript와 jQuery 기본 함수를 모두 사용하여 처리할 수 있습니다.
이 글에서는 JavaScript와 jQuery를 사용하여 웹 페이지의 텍스트 영역 값을 가져와서 변수에 저장하는 방법에 대해 알아봅니다.
JavaScript에서 텍스트 영역 값 가져오기
JavaScript에서는 HTML DOM 문서 메소드 getElementById("elementId").value를 사용하여 텍스트 값을 읽을 수 있습니다. getElementById() 메서드는 정의된 값이 있는 요소를 반환합니다. 요소가 존재하지 않으면 null을 반환합니다.
.value 속성은 텍스트 영역의 value 속성 값을 배치하고 반환합니다. 해당 속성은 기본값 또는 사용자가 제공하는 값을 전달합니다.
기본 구문:
여기에서 ID를 사용하여 특정 요소의 값을 가져오고 이를 textValue 변수에 저장합니다.
let textValue = document.getElementById('myText').value
예제 코드:
<!DOCTYPE html>
<html>
<body>
<h1>
Get text area value in JavaScript
</h1>
Enter any value: <input type="text" id="myElement" value="Default">
<p>Click the button to read the value.</p>
<button onclick="myFunction()">Read Value</button>
<script>
function myFunction() {
let result = document.getElementById("myElement").value //getting value, storing in variable
alert(result) // displaying in alert
}
</script>
</body>
</html>
예제 코드 설명:
- 위의 HTML 소스에서 사용자로부터 값을 얻기 위한 입력 필드를 만들었습니다.
- 그런 다음
myFunction()이라는 버튼의onclick이벤트 버튼을 생성했습니다. myFunction()본문에서result변수를 선언하고document.getElementById("myElement").value를 사용하여 해당 변수에 요소 값을 할당했습니다.- 마지막으로 사용자에게 경고로
result변수 값을 표시했습니다. - 위 소스를
.html확장자로 저장하고 아무 브라우저에서나 열어 결과를 볼 수 있습니다.
jQuery에서 텍스트 영역 값 가져오기
jQuery에서는 jQuery 메서드 $("#elementID").val()을 사용하여 텍스트 값을 읽을 수 있습니다. 먼저 헤더의 스크립트 태그에 jQuery CDN(콘텐츠 전송 네트워크)을 추가해야 합니다.
예제 코드:
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
alert( $("input:text").val()); //read value from input and display in alert
});
});
</script>
</head>
<body>
Enter any value: <input type="text" id="myElement" value="Default"> //getting value from user
<button >Read Value using jQuery</button>
</body>
</html>
예제 코드 설명:
- 위의 HTML 코드에서 사용자로부터 값을 가져오는 입력 필드를 만들었습니다.
- jQuery 함수를 호출하기 위한 버튼을 만들었습니다.
<script>태그에서 버튼의 클릭 이벤트를 호출했습니다.- 해당 클릭 이벤트 내에서 사용자가 지정한 텍스트 영역 값을 읽고 경고에 표시했습니다.
- 위 소스를
.html확장자로 저장하고 아무 브라우저에서나 열어 결과를 볼 수 있습니다.