텍스트 영역의 jQuery 설정 값
JavaScript에서는 querySelector() 메서드를 통해 HTML element, id 또는 class 인스턴스를 인스턴스화합니다. 그러나 이 자습서의 예제에서는 jQuery(#id)를 사용합니다.
다시 말하지만 HTML 태그에 적절한 속성을 추가하는 것과 같이 텍스트 영역에 대한 값을 설정하는 다른 규칙이 존재합니다. 따라서 DOM 조작에 초점을 맞추지 않고 jQuery로 문제를 해결할 것입니다.
오늘 튜토리얼에서는 .val() 및 .attr() 메서드를 사용하여 JQuery에서 텍스트 영역의 값을 설정하는 방법을 배웁니다.
.val() 대 .attr()
input 또는 textarea의 값을 설정하기 위해 jQuery에서 사용되는 .val() 메서드는 string을 표시합니다. 기본적으로 텍스트 영역은 비어 있지만 줄, 단어 또는 미리 정의된 설명은 이 범위에서 수행할 작업에 대한 명확한 아이디어를 제공할 수 있습니다.
일반적으로 대부분의 input 태그에서 기본 문자열을 설정하는 value 속성을 찾습니다. 그러나 textarea 태그의 경우에는 value 속성이 없습니다. 대신 placeholder 속성이 있습니다. 이제 코드 세그먼트에서 이러한 솔루션을 나타내는 인스턴스를 검사합니다.
.val() 메서드를 사용하여 textarea의 값 설정
이 예에서는 고정된 크기의 텍스트 영역이 있습니다. 또한 id를 추가합니다. 작업은 간단합니다. 지정된 id가 있는 해당 태그의 인스턴스를 가져오고 .val() 메서드를 적용합니다.
메서드 내에서 (예: "This is text area") 문자열을 전달하거나 문자열을 변수에 저장한 다음 전달할 수 있습니다. 그러나 먼저 코드 펜스를 시각화해 보겠습니다.
코드 조각:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<script src="https://code.jquery.com/jquery-3.6.0.min.js"
integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4="
crossorigin="anonymous">
</script>
<title>array loop through</title>
</head>
<body>
<textarea name="txt" id="txt" cols="30" rows="10"></textarea>
<script>
var str = "This is TextArea 1";
$("#txt").val(str);
</script>
</body>
</html>
출력:
보시다시피 텍스트 영역 상자에서 값이 문자열로 설정되었습니다. 문자열이 제거 가능하다는 것을 알 수 있습니다. 이 규칙은 약간 구식이거나 충분히 멋지지 않은 것 같습니다. 그럼 다음 예제를 살펴보겠습니다.
.attr() 메서드를 사용하여 텍스트 영역에 대한 값 설정
.attr() 메서드는 특히 HTML 요소에 대한 속성 값을 설정합니다. DOM 요소와 함께 속성을 설정하는 것이 아니라 선택에 따라 동적으로 처리될 수 있으므로 jQuery 또는 JavaScript를 통해 속성을 사용하는 것이 주요 방법입니다.
그러나 여기서는 메소드에 대한 매개변수를 설정하고 textarea 요소에는 placeholder라는 검증된 속성이 있습니다. 따라서 첫 번째 매개변수 placeholder를 지정하고 두 번째 인수는 값이 됩니다. 하지만 먼저 코드 라인을 확인해 봅시다.
코드 조각:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<script src="https://code.jquery.com/jquery-3.6.0.min.js"
integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4="
crossorigin="anonymous">
</script>
<title>array loop through</title>
</head>
<body>
<textarea name="txt" id="txt" cols="30" rows="10"></textarea>
<script>
var str = "This is TextArea 2";
$("#txt").attr("placeholder", str);
</script>
</body>
</html>
출력:
그리고 출력은 .attr() 메서드에서 전달된 문자열이 자리 표시자 값으로 설정되었음을 나타냅니다. 그리고 이것은 textarea의 보기를 설정하는 것과 같이 보다 통합되고 스마트한 보기입니다.
