[javascript] 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].value라이브 HTMLCollection을 반환하는 사용

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

방법 3 :

document.getElementsByTagName('tag_name')[whole_number].value라이브 HTMLCollection도 반환하는 사용

예를 들어, document.getElementsByTagName("input")[0].value; 이것이 페이지의 첫 번째 텍스트 상자 인 경우입니다.

방법 4 :

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

예를 들어, document.getElementsByName("searchTxt")[0].value; 이것이 페이지에서 이름이 ‘searchtext’인 첫 번째 텍스트 상자 인 경우입니다.

방법 5 :

document.querySelector('selector').valueCSS 선택기를 사용하여 요소를 선택 하는 강력한 기능 을 사용하십시오.

예를 들어, 이름으로 선택한 태그 이름으로 선택한 클래스로 선택한 document.querySelector('#searchTxt').value;ID로
document.querySelector('.searchField').value;선택
document.querySelector('input').value;
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;
document.querySelectorAll('[name="searchTxt"]')[0].value;

지원하다

Browser          Method1   Method2  Method3  Method4    Method5/6
IE6              Y(Buggy)   N        Y        Y(Buggy)   N
IE7              Y(Buggy)   N        Y        Y(Buggy)   N
IE8              Y          N        Y        Y(Buggy)   Y
IE9              Y          Y        Y        Y(Buggy)   Y
IE10             Y          Y        Y        Y          Y
FF3.0            Y          Y        Y        Y          N    IE=Internet Explorer
FF3.5/FF3.6      Y          Y        Y        Y          Y    FF=Mozilla Firefox
FF4b1            Y          Y        Y        Y          Y    GC=Google Chrome
GC4/GC5          Y          Y        Y        Y          Y    Y=YES,N=NO
Safari4/Safari5  Y          Y        Y        Y          Y
Opera10.10/
Opera10.53/      Y          Y        Y        Y(Buggy)   Y
Opera10.60
Opera 12         Y          Y        Y        Y          Y

유용한 링크

1. 자세한 내용을 포함한 모든 버그에 대해 이러한 방법의 지원을 보려면 여기를 클릭하십시오.
2. 정적 컬렉션과 라이브 컬렉션의 차이점 여기를 클릭하십시오.
3. NodeList와 HTMLCollection의 차이점 여기를 클릭하십시오

답변

//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;

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"/>

<input type="text" onkeyup="trackChange(this.value)" id="myInput">
<script>
function trackChange(value) {
    window.open("http://www.google.com/search?output=search&q=" + value)
}
</script>

<input type="text" maxlength="512" id="searchTxt" class="searchField"/>
<input type="button" value="Get Value" onclick="alert(searchTxt.value)">

<form name="calc" id="calculator">
  <input type="text" name="input">
  <input type="button" value="Set Value" onclick="calc.input.value='Set Value'">
</form>