如何使用 JavaScript 将默认搜索文本添加到 HTML 中的搜索框？

我们可以使用 JavaScript DOM getElementById()方法和onfocus和onblur事件将默认搜索文本添加到搜索框。

• getElementById()： DOM getElementById() 方法用于将值返回到 HTML 中使用的输入标签的唯一 id。当我们想要从您的文档中操作和获取信息时，它是最广泛使用的 DOM HTML 方法之一。假设如果存在多个具有相同 id 的元素，那么它将返回代码中的第一个元素。如果指定的 id 在代码中不存在，那么它将返回 null。

  句法：

  document.getElementById('element_id');

• onfocus 事件： onfocus 事件主要与 input、select 和 anchor 标签一起使用，每当用户点击输入标签时，onfocus 事件就会发挥作用。它主要与 onblur 事件一起使用。

  句法：

• onblur 事件： onblur 事件与 onfocus 事件一起使用。它在元素失去焦点时发挥作用，它也与输入、选择和锚标记一起使用。

  句法：

这里我们使用了两个示例将默认文本添加到搜索框，第一个示例使用 onfocus 和 onblur 事件，第二个示例使用 onfocus 和 onblur 事件以及 placeholder 属性。

示例 1：在下面的代码中，我们使用 JavaScript 的onfocus和onblur事件属性为 HTML 中的搜索框添加了一个默认值。

HTML

  

    
    
    Search box with default text

  

    
        GeeksforGeeks
    
    Search word in HTML using JavaScript
    
        
        
    
    
        // Text to be displayed on search box by default
        const defaultTextValue = 'Search...';
  
        // Here input id should match with the 
        // parameter of getElementById
        let searchBox = document.getElementById('Search');
  
  
        // Default text to be displayed
        searchBox.value = defaultTextValue;
  
  
        // Search box on focus 
        searchBox.onfocus = function () {
            if (this.value == defaultTextValue) {
                // Clears the search box
                this.value = '';
            }
        }
  
        // Search box when clicked outside
        searchBox.onblur = function () {
            if (this.value == '') {
                // Restores the search box with default value
                this.value = defaultTextValue;
            }
        }
    

  

输出：

搜索框

示例 2：当您单击搜索框时，占位符将使用JavaScript的onfocus和onblur事件显示“搜索...”文本，我们可以添加默认搜索文本。

HTML

  

    
    
    Search box with default text

  

    
        GeeksforGeeks
    
    Search word in HTML using JavaScript
  
    
        
        
    
    
        // Text to be displayed on search box by default
        const defaultTextValue = 'Geek';
  
        // Here input id should match with the
        //parameter of getElementById
        let searchBox = document.getElementById('Search');
  
  
        // Default text to be displayed
        searchBox.value = defaultTextValue;
  
  
        // Search box on focus 
        searchBox.onfocus = function () {
            if (this.value == defaultTextValue) {
                // Clears the search box
                this.value = '';
            }
        }
  
        // Search box when clicked outside
        searchBox.onblur = function () {
            if (this.value == '') {
                // Restores the search box with default value
                this.value = defaultTextValue;
            }
        }
    

  

输出：

搜索框