使用 JavaScript 将焦点设置到 HTML 表单元素

要将焦点设置到 HTML 表单元素，可以使用 JavaScript 的 focus() 方法。为此，请在要聚焦的元素的对象上调用此方法，如示例中所示。

示例 1：当用户点击 Focus 按钮时，focus() 方法被设置为输入标签。

  

    
        Set focus to HTML form element
    

  

    
        Click on button to set focus
        on input field
    
      
    
        
          
        
          
        
            Set Focus
        
    
      
    
        function focusInput() {
            document.getElementById("input1").focus();
        }
    

  
                    

输出：

• 单击按钮之前：
  
• 点击按钮后：
  

示例 2：此示例重点关注页面加载时自动输入的字段。

  

    
        Set focus to HTML form element
    

  

  
    
        Click on button to focus
        on the input field.
    
      
    
        Name: 
          
        
          
        Age: 
    
      
    
        window.onload = function() {
            document.getElementById("input1").focus();
        }
    

  
                    

输出：

示例 3：当单击 Focus 按钮时，以下程序将重点放在输入字段上。要模糊焦点输入字段，可以使用 blur() 属性。

  

    
        Set focus to HTML form element
    

  

    
        Click on button to focus
        on the input field.
    
      
    
        
          
        
          
        
            Focus
        
          
        
            Blur
        
    
      
    
        function focusInput() {
            document.getElementById("input1").focus();
        }
        function blurInput() {
            document.getElementById("input1").blur();
        }
    

  
                    

输出：

• 单击按钮之前：
  
• 单击焦点按钮后：
  
• 单击模糊按钮后：