如何使用 JavaScript 获取文本输入字段的值？

我们可以使用 JavaScript 中的各种方法来获取文本输入字段的值。有一个文本值属性可以设置和返回文本字段的值属性的值。此外，我们可以在脚本中使用jquery val() 方法来获取或设置文本输入字段的值。

以下是获取或设置文本输入字段值的两种不同方法：

使用文本值属性：文本值属性用于设置或返回输入字段的值属性的值。 value 属性指定输入文本字段的初始值。它包含默认值或用户类型。

句法：

Get value : textObject.value
Set value : textObject.value = text

示例 1：此示例使用 Text value 属性从输入文本字段中获取值。

HTML

  

      
            GeeksforGeeks  
    
    Text value property
    
        Change the text of the text field, 
        and then click the button below. 
    
   
    Name:
    Try it
    
  
      
    
      
    // Here the value is stored in new variable x 
    function myFunction() {
        var x = document.getElementById("myText").value;
        document.getElementById("demo").innerHTML = x;
    }
    

  

输出：

文本值属性

使用jquery val() 方法： val() 方法用于返回或设置被选元素的 value 属性。在默认模式下，此方法返回第一个匹配元素的 value 属性的值，并为所有匹配的元素设置 value 属性的值。

句法：

Get value : $(selector).val()
Set value : $(selector).val(value)

示例 2：此示例描述了从输入字段中获取值的 jquery val() 方法。

HTML

  

    
    
    
    $(document).ready(function() {
        $("button").click(function() {
              
            // Here the value is stored in variable. 
            var x = $("input:text").val();
            document.getElementById("demo").innerHTML = x;
        });
    });
    

  

      
            GeeksforGeeks  
        
    jquery val() method
    
     Change the text of the text field, and 
     then click the button below.
    
  
    Name:
     
  
    Get the value of the input field
    
  

  

输出：

jQuery val() 方法