JavaScript 팁: 텍스트 입력 필드의 값 가져오기

Question

JavaScript를 사용하여 검색하고 있습니다. 양식을 사용하고 싶지만 내 페이지의 다른 내용이 손상될 수 있습니다. 다음 입력 텍스트 필드가 있습니다.

<입력 이름="searchTxt" maxlength="512" id="searchTxt" />

이것은 내 JavaScript 코드입니다:

<스크립트 유형="text/javascript">
  함수 검색URL(){
    window.location = "http://www.myurl.com/search/" + (텍스트 값 입력);
  }
</스크립트>

텍스트 필드의 값을 JavaScript로 전달하는 방법은 무엇입니까?

Answer 1

으아악

이 기능을 코드펜에서 확인해 보세요.

Answer 2

양식 요소 내부에 입력 요소를 래핑하지 않고 입력 텍스트 상자의 값을 직접 가져오는 방법에는 여러 가지가 있습니다.

방법 1

document.getElementById('textbox_id').value 필수 상자의 가치를 알아보세요

예를 들어

document.getElementById("searchTxt").value;

참고: 메서드 2, 3, 4, 6은 요소 컬렉션을 반환하므로 [integer]를 사용하여 필요한 요소를 가져옵니다. 첫 번째 요소에는 [0]，对于第二个元素，使用[1] 등을 사용합니다...

방법 2

사용 document.getElementsByClassName('class_name')[整数].value, 라이브 HTMLCollection

을 반환합니다.

예를 들어

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

방법 3

라이브 HTMLCollection을 반환하는 document.getElementsByTagName('tag_name')[整数].value를 사용하세요

예를 들어

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

방법 4

document.getElementsByName('name')[整数].value, 라이브 NodeList

도 반환합니다.

예를 들어

document.getElementsByName("searchTxt")[0].value; 페이지에서 'searchtext'라는 이름의 첫 번째 텍스트 상자인 경우.

방법 5

CSS 선택기를 사용하여 요소를 선택하는 강력한 document.querySelector('selector').value를 사용하세요.

예를 들어

• document.querySelector('#searchTxt').value; 아이디로 선택
• document.querySelector('.searchField').value; 수업별로 선택
• document.querySelector('input').value; 태그 이름으로 선택
• document.querySelector('[name="searchTxt"]').value; 이름으로 선택

방법 6

document.querySelectorAll('selector')[整数].value, 또한 CSS 선택기를 사용하여 요소를 선택하지만 해당 선택기가 있는 모든 요소를 ​​정적 NodeList로 반환합니다.

예를 들어

• document.querySelectorAll('#searchTxt')[0].value; 아이디로 선택
• document.querySelectorAll('.searchField')[0].value; 수업별로 선택
• document.querySelectorAll('input')[0].value; 태그 이름으로 선택
• document.querySelectorAll('[name="searchTxt"]')[0].value; 이름으로 선택

지원

브라우저	방법 1	방법 2	방법 3	방법 4	방법 5/6
IE6	Y(질문)	N	Y	Y(질문)	N
IE7	Y(질문)	N	Y	Y(질문)	N
IE8	Y	N	Y	Y(질문)	Y
IE9	Y	Y	Y	Y(질문)	Y
IE10	Y	Y	Y	Y	Y
FF3.0	Y	Y	Y	Y	N IE=인터넷 익스플로러
FF3.5/FF3.6	Y	Y	Y	Y	Y FF=모질라 파이어폭스
FF4b1	Y	Y	Y	Y	Y GC=구글 크롬
GC4/GC5	Y	Y	Y	Y	Y Y=예,N=아니요
Safari4/Safari5	Y	Y	Y	Y	Y
오페라10.10/
오페라10.53/	Y	Y	Y	Y(질문)	Y
오페라10.60
오페라 12	Y	Y	Y	Y	Y