JavaScript를 사용하여 텍스트 입력 필드의 값을 어떻게 얻습니까?

JavaScript를 사용하여 텍스트 입력 필드의 값을 어떻게 얻습니까?

---

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].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 선택기를 사용하여 요소를 선택하지만 해당 선택기가있는 모든 요소를 ​​정적 Nodelist로 반환합니다.

예를 들어, 이름으로 선택한 태그 이름으로 선택한 클래스에서 선택한 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. Difference Between NodeList and HTMLCollection click Here

---

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

See this functioning in codepen.

---

Also you can, call by tags names, like this: form_name.input_name.value; So you will have the specific value of determined input in a specific form.

---

I would create a variable to store the input like this:

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

And then I would just use the variable to add the input value to the string.

= "Your string" + input;

---

You should be able to type:

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

I'm sure there are better ways to do this, but this one seems to work across all browsers, and it requires minimal understanding of JavaScript to make, improve, and edit.

---

Try this one

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

---

Tested in Chrome and Firefox:

Get value by element id:

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

Set value in form element:

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

https://jsfiddle.net/tuq79821/

Also have a look at a JavaScript calculator implementation: http://www.4stud.info/web-programming/samples/dhtml-calculator.html

UPDATE from @bugwheels94: when using this method be aware of this issue.

---

One can use the form.elements to get all elements in a form. If an element has id it can be found with .namedItem("id"). Example:

var myForm = document.getElementById("form1");
var text = myForm.elements.namedItem("searchTxt").value;
var url = "http://www.myurl.com/search/" + text;

Source: w3schools

---

<input id="new" >
    <button  onselect="myFunction()">it</button>    
    <script>
        function myFunction() {
            document.getElementById("new").value = "a";    
        }
    </script>

---

You can use onkeyup when you have more input field. Suppose you have four or input.then document.getElementById('something').value is annoying. we need to write 4 lines to fetch value of input field.

So, you can create a function that store value in object on keyup or keydown event.

Example :

<div class="container">
    <div>
        <label for="">Name</label>
        <input type="text" name="fname" id="fname" onkeyup=handleInput(this)>
    </div>
    <div>
        <label for="">Age</label>
        <input type="number" name="age" id="age" onkeyup=handleInput(this)>
    </div>
    <div>
        <label for="">Email</label>
        <input type="text" name="email" id="email" onkeyup=handleInput(this)>
    </div>
    <div>
        <label for="">Mobile</label>
        <input type="number" name="mobile" id="number" onkeyup=handleInput(this)>
    </div>
    <div>
        <button onclick=submitData()>Submit</button>
    </div>
</div>

javascript :

<script>
    const data={ };
    function handleInput(e){
        data[e.name] = e.value;
    }
    function submitData(){
        console.log(data.fname); //get first name from object
        console.log(data); //return object
    }
</script>

---

simple js

function copytext(text) {
    var textField = document.createElement('textarea');
    textField.innerText = text;
    document.body.appendChild(textField);
    textField.select();
    document.execCommand('copy');
    textField.remove();
}

---

If you are using jQuery then by using plugin formInteract, you just need to do this:

// Just keep the HTML as it is.

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

At bottom of the page just include this plugin file and write this code:

// Initialize one time at the bottom of the page.
var search= $("#searchTxt).formInteract();

search.getAjax("http://www.myurl.com/search/", function(rsp){
    // Now do whatever you want to with your response
});

Or if using a parameterized URL then use this:

$.get("http://www.myurl.com/search/"+search.get().searchTxt, {}, function(rsp){
    // Now do work with your response;
})

Here is the link to project https://bitbucket.org/ranjeet1985/forminteract

You can use this plugin for many purposes like getting the value of a form, putting values into a form, validation of forms and many more. You can see some example of code in the index.html file of the project.

Of course I am the author of this project and all are welcome to make it better.

참고URL : https://stackoverflow.com/questions/11563638/how-do-i-get-the-value-of-text-input-field-using-javascript