Làm cách nào để có được giá trị của trường nhập văn bản bằng JavaScript?

Tôi đang làm việc trên một tìm kiếm với JavaScript. Tôi sẽ sử dụng một hình thức, nhưng nó làm rối tung một cái gì đó khác trên trang của tôi. Tôi có trường văn bản đầu vào này:

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

Và đây là mã JavaScript của tôi:

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

Làm cách nào để tôi nhận được giá trị từ trường văn bản vào JavaScript?

Có nhiều phương pháp khác nhau để lấy trực tiếp giá trị hộp văn bản (không bao bọc phần tử đầu vào bên trong một phần tử biểu mẫu):

Cách 1:

document.getElementById('textbox_id').value để có được giá trị của hộp mong muốn

Ví dụ, document.getElementById("searchTxt").value;

Lưu ý: Phương thức 2,3,4 và 6 trả về một tập hợp các phần tử, vì vậy hãy sử dụng [Whole_number] để có được sự xuất hiện mong muốn. Đối với phần tử đầu tiên, sử dụng [0], cho phần thứ hai sử dụng 1 , v.v.

Cách 2:

Sử dụng document.getElementsByClassName('class_name')[whole_number].valueđể trả về một HTMLCollection trực tiếp

Ví dụ: document.getElementsByClassName("searchField")[0].value; nếu đây là hộp văn bản đầu tiên trong trang của bạn.

Cách 3:

Sử dụng document.getElementsByTagName('tag_name')[whole_number].valuecũng trả về một HTMLCollection trực tiếp

Ví dụ: document.getElementsByTagName("input")[0].value; nếu đây là hộp văn bản đầu tiên trong trang của bạn.

Cách 4:

document.getElementsByName('name')[whole_number].value mà cũng> trả về một NodeList trực tiếp

Ví dụ: document.getElementsByName("searchTxt")[0].value; nếu đây là hộp văn bản đầu tiên có tên 'searchtext' trong trang của bạn.

Phương pháp 5:

Sử dụng mạnh mẽ document.querySelector('selector').valuesử dụng bộ chọn CSS để chọn phần tử

Ví dụ: document.querySelector('#searchTxt').value; được chọn theo id
document.querySelector('.searchField').value;được chọn theo lớp
document.querySelector('input').value;được
document.querySelector('[name="searchTxt"]').value;chọn theo tên thẻ được chọn theo tên

Phương pháp 6:

document.querySelectorAll('selector')[whole_number].value cũng sử dụng bộ chọn CSS để chọn các phần tử, nhưng nó trả về tất cả các phần tử với bộ chọn đó dưới dạng Nodelist tĩnh.

Ví dụ: document.querySelectorAll('#searchTxt')[0].value; được chọn theo id
document.querySelectorAll('.searchField')[0].value;được chọn theo lớp
document.querySelectorAll('input')[0].value; được
document.querySelectorAll('[name="searchTxt"]')[0].value;chọn theo tên thẻ được chọn theo tên

Ủng hộ

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

Liên kết hữu ích

1. Để xem sự hỗ trợ của các phương thức này với tất cả các lỗi bao gồm thêm chi tiết bấm vào đây
2. Sự khác biệt giữa bộ sưu tập tĩnh và bộ sưu tập Live bấm vào đây
3. Sự khác biệt giữa NodeList và HTMLCollection bấm vào đây

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

Xem chức năng này trong codepen.

Tôi sẽ tạo một biến để lưu trữ đầu vào như thế này:

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

Và sau đó tôi sẽ chỉ sử dụng biến để thêm giá trị đầu vào vào chuỗi.

= "Your string" + input;

Bạn sẽ có thể gõ:

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

Tôi chắc chắn có nhiều cách tốt hơn để làm điều này, nhưng cách này dường như hoạt động trên tất cả các trình duyệt và nó đòi hỏi sự hiểu biết tối thiểu về JavaScript để thực hiện, cải thiện và chỉnh sửa.

Ngoài ra, bạn có thể, gọi theo tên thẻ, như thế này: form_name.input_name.value; Vì vậy, bạn sẽ có giá trị cụ thể của đầu vào được xác định trong một hình thức cụ thể.

Hãy thử cái này

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

Đã thử nghiệm trong Chrome và Firefox:

Nhận giá trị theo id phần tử:

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

Đặt giá trị trong phần tử biểu mẫu:

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

Ngoài ra, hãy xem triển khai máy tính JavaScript: http://www.4stud.info/web-programming/samples/dhtml-calculator.html

CẬP NHẬT từ @ bugwheels94: khi sử dụng phương pháp này, hãy lưu ý vấn đề này .

Bạn có thể sử dụng onkeyup khi bạn có thêm trường nhập. Giả sử bạn có bốn hoặc đầu vào. Thật document.getElementById('something').valuekhó chịu. chúng ta cần viết 4 dòng để tìm nạp giá trị của trường đầu vào.

Vì vậy, bạn có thể tạo một hàm lưu trữ giá trị trong đối tượng trong sự kiện keyup hoặc keydown.

Thí dụ :

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

Người ta có thể sử dụng form.elements để lấy tất cả các thành phần trong một biểu mẫu. Nếu một phần tử có id, nó có thể được tìm thấy với .namedItem ("id"). Thí dụ:

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

Nguồn: w3schools

Nếu bạn inputđang ở trong một formvà bạn muốn nhận được giá trị sau khi gửi, bạn có thể làm như thế

<form onsubmit="submitLoginForm(event)">
    <input type="text" name="name">
    <input type="password" name="password">
    <input type="submit" value="Login">
</form>

<script type="text/javascript">

    function submitLoginForm(event){
        event.preventDefault();

        console.log(event.target['name'].value);
        console.log(event.target['password'].value);
    }
</script>

Lợi ích của cách này: Ví dụ trang của bạn có 2 form cho đầu vào sendervà receiverthông tin.

Nếu bạn không sử dụng formcho giá trị get sau đó
- Bạn có thể đặt 2 khác nhau id(hoặc taghoặc name...) đối với từng lĩnh vực như sender-namevà receiver-name, sender-addressvà receiver-address, ...
- Nếu bạn đặt cùng một giá trị cho 2 đầu vào, sau đó sau khi getElementsByName(hoặc getElementsByTagName.. .) bạn cần nhớ 0 hoặc 1 là senderhoặc receiver. Sau này nếu bạn thay đổi thứ tự 2 formtrong html, bạn cần kiểm tra lại mã này

Nếu bạn sử dụng form, sau đó bạn có thể sử dụng name, address...

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

js đơn giản

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

Bạn có thể đọc giá trị bằng cách

searchTxt.value

function searchURL() {
   let txt = searchTxt.value;
   console.log(txt);
   // window.location = "http://www.myurl.com/search/" + txt; ...
}

document.querySelector('.search').addEventListener("click", ()=>searchURL());

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

<button class="search">Search</button>

Nếu bạn đang sử dụng jQuery thì bằng cách sử dụng plugin formInteract, bạn chỉ cần làm điều này:

// Just keep the HTML as it is.

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

Ở dưới cùng của trang chỉ cần bao gồm tệp plugin này và viết mã này:

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

Hoặc nếu sử dụng URL được tham số hóa thì hãy sử dụng URL này:

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

Đây là liên kết đến dự án https://bitbucket.org/ranjeet1985/forminteract

Bạn có thể sử dụng plugin này cho nhiều mục đích như nhận giá trị của biểu mẫu, đưa giá trị vào biểu mẫu, xác thực các biểu mẫu và nhiều mục đích khác. Bạn có thể xem một số ví dụ về mã trong tệp index.html của dự án.

Tất nhiên tôi là tác giả của dự án này và tất cả đều được chào đón để làm cho nó tốt hơn.