Różnica między val () a text ()

225

Jaka jest różnica między funkcjami jQuery val()a text()?

Gdzie użyłbyś jednego na drugim?

javascript jquery html

— Dan Appleyard
źródło

— hbtpoprock

284

.val()działa na elementach wejściowych (lub dowolnym elemencie z atrybutem wartości?) i .text()nie będzie działać na elementach wejściowych. .val()pobiera wartość elementu wejściowego - niezależnie od typu. .text()pobiera innerText (nie HTML) wszystkich dopasowanych elementów:

.text()

Wynikiem jest ciąg znaków, który zawiera połączoną zawartość tekstową wszystkich dopasowanych elementów. Ta metoda działa zarówno na dokumentach HTML, jak i XML. Nie może być stosowany w elementach wejściowych. Jako tekst pola wejściowego użyj atrybutu val.

.val()

Uzyskaj treść atrybutu wartości pierwszego dopasowanego elementu

— tvanfosson
źródło

3

zabawna rzecz - weź pod uwagę, że mogą nie być sobie równitextarea someTextArea.html() !== someTextArea.val()

— Maciej Jankowski

Nie używaj textarea.html („content”) do ładowania treści. Załadowałem trochę treści z dynamiką jQuery - zabawne było to, że kliknąłem przycisk Zapisz. Po tej akcji zawartość pola tekstowego już się nie zmieniła. Przy ustawianiu zawartości za pomocą .val („content”) ten problem się nie pojawiał. Nie mogłem zrozumieć, dlaczego, ale myślę, że ma to coś wspólnego z buforowaniem DOM i innym zachowaniem tych 2 metod.

— Erik Čerpnjak

25

text () zwraca połączoną treść wszystkich dopasowanych elementów (takich jak p, div itp.) val () służy do uzyskania wartości elementu wejściowego (takiego jak input, select itd.)

zgodnie z oficjalną dokumentacją tekst () nie powinien być używany z elementami wejściowymi

1

val () służy do pobierania wartości ze wszystkich typów danych wejściowych HTML, takich jak (pole wyboru, tekst itp.), w których użytkownik ma opcję wprowadzania wartości. Dawny:-

<input type="text" id="txt_name" /> 
 <input type="checkbox" name="vehicle" value="Bike" id="chk_byk" class="ss">bike<br>   
<script type="text/javascript">
 $(document).ready(function () {

            $("#btn_submit").click(function () {
                alert($("#chk_byk").val());
            });

            });


    </script>

gdzie jako text () służy do pobierania wartości z elementów HTML, w których użytkownik nie będzie wchodził w interakcje, np. (p, div itp.)

    <p id="p1">Hi how are u??</p>
 <div id="dv5">Debendra</div>

 <script type="text/javascript">

        $(document).ready(function () {

            $("#btn_submit").click(function () {
                alert($("#dv5").text());
            });

            });


    </script>

— Debendra Dash
źródło

0

Funkcja .val () zwraca wartość z elementu wejściowego, a funkcja .text () zwraca wartość z elementów innych niż wejściowe. Możemy również przekazać argument ciąg do tych funkcji, aby ustawić wartość elementu wywołującego . Poniższy kod pokazuje, jak ustawić wartość elementów DOM za pomocą funkcji .val () i .text ():

Część HTML:

<form id="form1"><input id="first" type="text" /><input type="submit" /></form>
<div id="second">Click the "Submit Query" to see it work</div>

Część Jquery:

$(document).on("submit", "form", function (e) {
    $("#first").val("This input is set by .val() function");
    $("#second").text("A new text is set using .text() function!");
    return false;
})

Demo: http://jsfiddle.net/urhys9zj/6/

— Himanshu Singh
źródło