JavaScript를 사용하여 텍스트 입력 필드의 값을 얻으려면 어떻게 해야 합니까?

자바스크립트로 검색을 하고 있습니다.폼을 사용하고 싶지만, 제 페이지에 뭔가 다른 것이 흐트러면…입력 텍스트 필드가 있습니다.

<input name="searchTxt" type="text" maxlength="512" id="searchTxt" class="searchField"/> 

그리고 이게 내 JavaScript 코드입니다.

<script type="text/javascript">
function searchURL(){
window.location = "http://www.myurl.com/search/" + (input text value);
} </script> 

텍스트 필드의 값을 JavaScript로 가져오려면 어떻게 해야 합니까?

질문에 대한 답변

입력 텍스트 상자 값을 직접 가져오는 방법은 여러 가지가 있습니다(폼 요소 내에서 입력 요소를 줄지 않고).

방법 1

document.getElementById('textbox_id').value원하는 상자의 값을 구하다

예를들면

document.getElementById("searchTxt").value;

주의: 메서드 2, 3, 4, 6은 요소의 컬렉션을 반환하므로 [whole_number]를 사용하여 원하는 오카렌스를 가져옵니다.첫 번째 요소의 경우,[0], 두 번째 용도의 경우[1], 기타 등등…

방법 2

사용하다document.getElementsByClassName('class_name')[whole_number].valueLive HTMLCollection을 반환합니다.

예를들면

document.getElementsByClassName("searchField")[0].value;이 텍스트 상자가 페이지의 첫 번째 텍스트 상자인지 확인합니다.

방법 3

사용하다document.getElementsByTagName('tag_name')[whole_number].value라이브 HTML Collection도 반환한다.

예를들면

document.getElementsByTagName("input")[0].value;이 텍스트 상자가 페이지의 첫 번째 텍스트 상자인 경우.

방법 4

document.getElementsByName('name')[whole_number].value또한 >는 라이브 NodeList를 반환합니다.

예를들면

document.getElementsByName("searchTxt")[0].value;페이지에 이름이 ‘검색 텍스트’인 첫 번째 텍스트 상자인 경우.

방법 5

파워풀한 사용document.querySelector('selector').valueCSS 셀렉터를 사용하여 요소를 선택합니다.

예를들면

• document.querySelector('#searchTxt').value;ID에 의해 선택됨
• document.querySelector('.searchField').value;클래스별로 선택되다
• document.querySelector('input').value;tagname에 의해 선택됨
• document.querySelector('[name="searchTxt"]').value;이름으로 선택되다

방법 6

document.querySelectorAll('selector')[whole_number].value또한 CSS 셀렉터를 사용하여 요소를 선택하지만 이 셀렉터를 가진 모든 요소를 스태틱노델리스트로 반환합니다.

예를들면

• document.querySelectorAll('#searchTxt')[0].value;ID에 의해 선택됨
• document.querySelectorAll('.searchField')[0].value;클래스별로 선택되다
• document.querySelectorAll('input')[0].value;tagname에 의해 선택됨
• document.querySelectorAll('[name="searchTxt"]')[0].value;이름으로 선택되다

지지하다

유용한 링크

1. 자세한 내용을 포함한 모든 버그에 대한 이러한 방법의 지원을 보려면 여기를 클릭하십시오.
2. 정적 수집과 실시간 수집의 차이 여기를 클릭하십시오.
3. Node List와 HTML 콜렉션의 차이여기를 클릭해 주세요.

//creates a listener for when you press a key window.onkeyup = keyup;
//creates a global Javascript variable var inputTextValue;
function keyup(e) {
//setting your input text to the global Javascript Variable for every key press
inputTextValue = e.target.value;
//listens for you to press the ENTER key, at which point your web address will change to the one you have input in the search box
if (e.keyCode == 13) {
window.location = "http://www.myurl.com/search/" + inputTextValue;
} } 

이 기능을 코드펜으로 참조하십시오.

다음과 같이 입력을 저장하는 변수를 만듭니다.

var input = document.getElementById("input_id").value; 

그런 다음 변수를 사용하여 입력 값을 문자열에 추가합니다.

= "Your string" + input;

다음과 같이 입력할 수 있습니다.

var input = document.getElementById("searchTxt");
function searchURL() {
window.location = "http://www.myurl.com/search/" + input.value; }

<input name="searchTxt" type="text" maxlength="512" id="searchTxt" class="searchField"/>

물론 더 나은 방법이 있겠지만, 이 방법은 모든 브라우저에서 작동하며, JavaScript를 만들고, 개선하고, 편집하는 데 최소한의 이해만 필요합니다.

또, 태그명으로 다음과 같이 호출할 수도 있습니다.form_name.input_name.value;따라서 특정 형식으로 결정된 입력의 특정 값을 얻을 수 있습니다.