JavaScript kullanarak metin giriş alanının değerini nasıl alabilirim?

JavaScript ile bir arama üzerinde çalışıyorum. Bir form kullanırdım, ancak sayfamda başka bir şey karıştırıyor. Bu giriş metin alanı var:

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

Ve bu benim JavaScript kodum:

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

Metin alanındaki değeri JavaScript'e nasıl alabilirim?

Giriş metin kutusu değerini doğrudan almak için çeşitli yöntemler vardır (giriş öğesini form öğesinin içine sarmadan):

Yöntem 1:

document.getElementById('textbox_id').value İstenen kutunun değerini almak için

Örneğin, document.getElementById("searchTxt").value;

Not: Yöntem 2,3,4 ve 6 bir elemanlar koleksiyonu döndürür, bu nedenle [tam_sayı] kullanarak istediğiniz oluşumu elde edin. İlk eleman için [0] kullanın, ikincisi için 1 kullanın vb.

Yöntem 2:

document.getElementsByClassName('class_name')[whole_number].valueCanlı HTMLC toplaması döndüren kullanımı

Örneğin, document.getElementsByClassName("searchField")[0].value; bu sayfanızdaki ilk metin kutusuysa.

Yöntem 3:

document.getElementsByTagName('tag_name')[whole_number].valueCanlı HTMLColection döndüren kullanımı

Örneğin, document.getElementsByTagName("input")[0].value; sayfanızdaki ilk metin kutusuysa.

Yöntem 4:

document.getElementsByName('name')[whole_number].value ki bu da> canlı bir Düğüm Listesi döndürür

Örneğin, document.getElementsByName("searchTxt")[0].value; bu, sayfanızda 'arama metni' adlı ilk metin kutusuysa.

Yöntem 5:

document.querySelector('selector').valueÖğeyi seçmek için bir CSS seçici kullanan güçlü olanı kullanın

Örneğin, document.querySelector('#searchTxt').value; id tarafından seçilen
document.querySelector('.searchField').value;sınıfı tarafından seçilen
document.querySelector('input').value;tagName tarafından seçilen
document.querySelector('[name="searchTxt"]').value;isim tarafından seçilen

Yöntem 6:

document.querySelectorAll('selector')[whole_number].value bu da öğeleri seçmek için bir CSS seçici kullanır, ancak o seçicideki tüm öğeleri statik bir Nodelist olarak döndürür.

Örneğin, document.querySelectorAll('#searchTxt')[0].value; id tarafından seçilen
document.querySelectorAll('.searchField')[0].value;sınıfı tarafından seçilen
document.querySelectorAll('input')[0].value; tagName tarafından seçilen
document.querySelectorAll('[name="searchTxt"]')[0].value;isim tarafından seçilen

Destek

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

Kullanışlı bağlantılar

1. Daha fazla ayrıntı içeren tüm hatalarla bu yöntemlerin desteğini görmek için buraya tıklayın
2. Statik koleksiyonlar ile Canlı koleksiyonlar arasındaki fark Buraya Tıklayın
3. NodeList ve HTMLCollection Arasındaki Fark Buraya Tıklayın

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

Kod alanında bu işlevselliğe bakın.

Ben girişi bu şekilde depolamak için bir değişken oluşturmak istiyorsunuz:

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

Ve sonra sadece dizeye girdi değerini eklemek için değişkeni kullanırdım.

= "Your string" + input;

Yazabilmeniz gerekir:

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

Bunu yapmanın daha iyi yolları olduğundan eminim, ancak bu tüm tarayıcılarda çalışıyor gibi görünüyor ve yapmak, geliştirmek ve düzenlemek için JavaScript'in minimum düzeyde anlaşılmasını gerektirir.

Ayrıca, etiket adlarını şu şekilde arayabilirsiniz: form_name.input_name.value; Böylece belirli bir formda belirli bir girdinin belirli bir değerine sahip olursunuz.

Bunu dene

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

Chrome ve Firefox'ta test edildi:

Öğe kimliğine göre değer alın:

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

Form öğesindeki değeri ayarla:

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

Ayrıca bir JavaScript hesap makinesi uygulamasına da göz atın: http://www.4stud.info/web-programming/samples/dhtml-calculator.html

@ Bugwheels94'ten GÜNCELLEME: bu yöntemi kullanırken bu sorunun farkında olun .

Daha fazla giriş alanınız olduğunda onkeyup komutunu kullanabilirsiniz. Dört veya girişiniz olduğunu varsayalım. document.getElementById('something').value var. can sıkıcı. giriş alanının değerini almak için 4 satır yazmamız gerekir.

Böylece, keyup veya keydown olayında nesnede değer saklayan bir işlev oluşturabilirsiniz.

Misal :

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

Bir formdaki tüm öğeleri almak için form.elements kullanılabilir. Bir öğenin kimliği varsa .namedItem ("id") ile bulunabilir. Misal:

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

Kaynak: w3schools

Eğer inputbir ise formve gönderdikten sonra değer almak istiyorsanız beğenebilirsiniz

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

Bu avantajdan faydalanın: Sayfanızda giriş ve bilgi için 2 tane var . formsenderreceiver

Eğer Kullanmadığınız formsonra olsun değeri
- 2 farklı ayarlayabilirsiniz id(ya tagya namegibi her bir alan için ...) sender-nameve receiver-name, sender-addressve receiver-address...
- O zaman sonra, 2 girişi için aynı değere ayarlarsanız getElementsByName(veya getElementsByTagName.. .) Eğer 0 veya 1'dir hatırlamanız gereken senderveya receiver. Daha sonra form, html cinsinden 2 sırasını değiştirirseniz, bu kodu tekrar kontrol etmeniz gerekir

Eğer kullandığınız form, o zaman kullanabilirsiniz name, address...

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

basit js

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

Değeri şu şekilde okuyabilirsiniz:

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>

JQuery kullanıyorsanız, formInteract eklentisini kullanarak, bunu yapmanız yeterlidir:

// Just keep the HTML as it is.

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

Sayfanın altına bu eklenti dosyasını ekleyin ve şu kodu yazın:

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

Veya parametreli bir URL kullanıyorsanız şunu kullanın:

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

İşte https://bitbucket.org/ranjeet1985/forminteract projesine bağlantı

Bu eklentiyi bir formun değerini almak, bir forma değer koymak, formların doğrulanması ve daha pek çok amaç için kullanabilirsiniz. Bazı kod örneklerini projenin index.html dosyasında görebilirsiniz.

Tabii ki bu projenin yazarıyım ve herkes bunu daha iyi hale getirebilir.