如何使用 jQuery 防止文本字段失去焦点？

在本文中，我们将学习如何使用 jQuery 防止文本字段或输入失去焦点。这可用于需要用户验证的情况。有两种方法可以采取：

方法 1：我们将使用 jQuery bind()、val()、preventDefault() 和 focus() 方法。 bind()方法用于将“ focusout ”事件附加到文本字段元素。然后创建一个辅助函数isValidString() ，它可以帮助我们验证文本字段中的用户输入。如果字符串是“ geeks ”，则该函数返回true ，否则返回false 。使用val()方法提取文本字段的值，并将其用作isValidString()函数中的参数。如果函数返回 false，那么我们使用preventDefault()来阻止“ focusout ”事件的默认操作，这意味着文本字段不会失去焦点。一旦文本字段中的输入是“geeks”，控制流就会超出“ if ”语句，并且恢复“ focusout ”事件的默认操作，这意味着文本字段可能会失去焦点。

示例：这里，如果文本字段中的输入不是单词“ geeks ”，即使我们在文本字段之外单击，文本字段也不会失去焦点。

HTML



  
    
  
    
    
  
  
    GeeksForGeeks
    How to prevent a textfield from 
       losing focus using jQuery
  
    
      Here, the textfield will only lose focus
      when the word "geeks" is entered

HTML



  
    
  
    
    
  
  
    GeeksForGeeks
    How to prevent a textfield from 
       losing focus using jQuery
  
    
      Here, the textfield will only lose 
      focus when the word "geeks" is entered

输出：

方法 2：我们将使用 jQuery bind() 、 val() 、 preventDefault()和focus()方法。这种方法与前一种方法类似，但不同之处在于附加到文本字段元素的事件是“ blur ”而不是“ focusout ”。 “ blur ”事件类似于“ focusout ”事件，但关键区别在于“ blur ”事件不会冒泡。因此，如果需要找出元素或其子元素是否失去焦点，则应使用“ focusout ”事件。

例子：

HTML



  
    
  
    
    
  
  
    GeeksForGeeks
    How to prevent a textfield from 
       losing focus using jQuery
  
    
      Here, the textfield will only lose 
      focus when the word "geeks" is entered

输出：