Bu yazı, JavaScript'te metin alanı değeri elde etme yaklaşımlarını açıklayacaktır.
JavaScript'te Metin Alanı Değeri Nasıl Elde Edilir?
Metin alanı değeri, aşağıdaki yaklaşımlar kullanılarak JavaScript'te alınabilir:
- “ getElementById() ' yöntem.
- “ addEventListener() ' yöntem.
- “ jQuery ”.
Yaklaşım 1: getElementById() Yöntemini Kullanarak JavaScript'te Metin Alanı Değeri Alın
“ getElementById() ' yöntemi, belirtilen ' ile bir öğeye erişir İD ”.Bu yöntem, giriş metin alanını getirmek ve içine girilen değeri döndürmek için uygulanabilir.
Sözdizimi
belge. getElementById ( eleman )
Verilen söz diziminde:
- “ eleman ”, “ anlamına gelir İD ” belirli bir öğeye karşı alınacak.
Örnek
Aşağıdaki örneğe bir göz atalım:
Aşağıdaki adımları aşağıdaki kodda uygulayalım:
< h3 > Metin alanı değerini al içinde JavaScript h3 >
Birşeyler yaz : < giriş tipi = 'Metin' İD = 'Txt' Yer tutucu = 'Metin Girin...' >
< tıklama düğmesi = 'textareaValue()' > Değer elde etmek buton >
Aşağıdaki adımları gerçekleştirin:
- İlk adımda, belirtilen başlığı belirtin.
- Bundan sonra, giriş metin alanını belirtilen ' İD ' ve ' Yer tutucu ' değer.
- Ayrıca, ekli bir düğme oluşturun ' tıklamada ” textareaValue() işlevine yönlendiren olay
Kodun JavaScript kısmına geçelim:
< senaryo >işlev metin alanıDeğeri ( ) {
İzin Vermek almak = belge. getElementById ( 'Txt' ) . değer
Alarm ( almak )
}
senaryo >
Yukarıdaki JavaScript kodunda:
- “ adlı bir işlev bildirin. textareaValue() ”.
- Tanımında, giriş metni alanına belirtilen kimliğine göre ' kullanarak erişin. getElementById() ' yöntem.
- Ayrıca, “ değer Girilen metin değerini almak için ” özelliği.
- Son olarak, metin alanı değerini “ Alarm ' diyalog kutusu.
Çıktı
Yukarıdaki çıktıda alarm diyalog kutusu üzerinden girilen değerin getirildiği görülmektedir.
Yaklaşım 2: addEventListener() Yöntemini Kullanarak JavaScript'te Metin Alanı Değeri Alın
“ addEventListener() ' yöntemi bir ' ilişkilendirmek için kullanılır Etkinlik ” bir öğe ile. Bu yöntem, işleve bir olay eklemek için kullanılabilir, öyle ki metin alanı değeri konsolda her girişte yan yana getirilir.
Sözdizimi
eleman. addEventListener ( Etkinlik , işlev , yönetici )Yukarıdaki sözdiziminde:
- “ Etkinlik ” olay adını işaret eder.
- “ işlev ”, bir olayın tetiklenmesi üzerine çalışacak işlevi belirtir.
- “ yönetici ” isteğe bağlı parametredir.
Örnek
Aşağıda verilen örneği adım adım takip edelim:
< metin alanı kimliği = 'txtarea' sıralar = '5' sütunlar = '25' Yer tutucu = ' Metni Girin...' > metin alanı >
< komut dosyası türü = 'metin/javascript' >
İzin Vermek almak = belge. getElementById ( 'txtarea' ) ;
konsol. kayıt ( almak . değer ) ;
almak . addEventListener ( 'giriş' , işlev metin alanıDeğeri ( Etkinlik ) {
konsol. kayıt ( Etkinlik. hedef . değer ) ;
} ) ;
senaryo >
Yukarıdaki kod parçacığında:
- Belirtilen etiketi belirtin. Ayrıca, “ metin alanı ' belirtilen değere sahip öğe ' İD ' ve ' Yer tutucu ” ve boyutlarını da ayarlayın.
- Kodun JavaScript bölümünde, bir önceki adımda belirtilen metin alanına erişin ve “ kullanarak görüntüleyin. değer ' Emlak.
- Bir sonraki adımda, bir etkinlik ekleyin ' Metin “getirilene” metin alanı ' kullanmak ' addEventListener() ” yöntemini seçin ve onu işleve uygulayın” textareaValue() ”. “ Etkinlik ” bağımsız değişkeninde tetiklenen olay hakkında bilgi iletir.
- Bu, girilen metin değerlerinin her birinin yan yana kaydedilmesine neden olur.
Çıktı
Yukarıdaki çıktıdan, “ getiriliyor ” girilen metin değerlerinin her biri gözlemlenebilir.
Yaklaşım 3: jQuery Kullanarak JavaScript'te Metin Alanı Değeri Alın
“ jQuery ”, giriş metni alanına erişmek ve Belge Nesne Modeli (DOM) yüklenir yüklenmez işlevlerini tetiklemek için uygulanabilir.
Örnek
Aşağıda verilen örneği takip edelim:
Birşeyler yaz : < giriş tipi = 'Metin' İD = 'Txt' Yer tutucu = 'Metin Girin...' >
< buton > Değer elde etmek buton >
Yukarıdaki kod satırlarında aşağıdaki adımları gerçekleştirin:
- Yöntemlerini uygulamak için jQuery kitaplığını dahil edin.
- “ giriş ” belirtilen değerlere sahip metin alanı olarak “ İD ' ve ' Yer tutucu ” daha önce tartışıldığı gibi.
- Ayrıca, düğme tıklandığında değeri almak için bir düğme oluşturun.
Kodun JavaScript kısmına geçin:
< senaryo >$ ( belge ) . hazır ( işlev ( ) {
$ ( 'buton' ) . Tıklayın ( işlev ( ) {
konsol. kayıt ( $ ( 'giriş metni' ) . val ( ) ) ;
} ) ;
} ) ;
senaryo >
Belirtilen adımları izleyin:
- Uygulamak ' hazır() Yüklenen DOM üzerine diğer yöntemleri uygulamak için ” yöntemi.
- Oluşturulan düğmeye erişin ve “ Tıklayın() ” parametresinde belirtilen işlevi yürütecek olan yöntem.
- click() yöntemi, belirtilen giriş metni alanına erişecek ve girilen metin değerini konsolda günlüğe kaydedecektir.
Çıktı
Bu nedenle, türün değeri konsolda günlüğe kaydedilir.
Bunların hepsi JavaScript yardımıyla metin alanının değerini almanın farklı yollarıydı.
Çözüm
“ getElementById() ” yöntemi, “ addEventListener() ” yöntemi veya “ jQuery JavaScript'te metin alanı değeri elde etmek için kullanılabilir. getElementById() yöntemi, giriş metni alanına erişmek ve girilen metin alanı değerini uyarı yoluyla görüntülemek için uygulanabilir. addEventListener() yöntemi, bir “ eklemek için kullanılabilir. giriş ” Her girişte metin değerini yan yana alacak olay. JQuery, düğmeye doğrudan erişmek ve konsolda düğme tıklandığında girilen metin değerini almak için uygulanabilir. Bu öğretici, JavaScript'te metin alanı değerinin nasıl alınacağını açıklar.