如何用jQuery防止一个文本字段失去焦点

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

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

例子：这里，如果文本框中的输入不是 “geeks“，即使我们在文本框外点击，文本框也不会失去焦点。

<!DOCTYPE html>
<html>
  <head>
    <script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js">
    </script>
  
    <!-- Basic inline styling -->
    <style>
      body {
        text-align: center;
      }
  
      h1 {
        color: green;
        font-size: 40px;
      }
  
      p {
        font-size: 20px;
        font-weight: bold;
      }
  
      input {
        margin-top: 0.75rem;
      }
  
      /* To make input on focus 
      look more distinct */
      input:focus {
        outline: none !important;
        border: 3px solid green;
        box-shadow: 0 0 10px green;
      }
    </style>
  </head>
  <body>
    <h1>GeeksForGeeks</h1>
    <p>How to prevent a textfield from 
       losing focus using jQuery</p>
  
    <p>
      Here, the textfield will only lose focus
      when the word "geeks" is entered
    </p>
  
    <input type="text" class="geeks" />
    <script type="text/javascript">
      (function () {
        (".geeks").bind("focusout", function (e) {
          if (!isValidString((this).val())) {
            e.preventDefault();
            (this).focus();
          }
        });
      });
        
      // Function to check whether the 
      // string is "geeks" or not
      function isValidString(s) {
        return s === "geeks";
      }
    </script>
  </body>
</html>

输出:

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

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

示例:

<!DOCTYPE html>
<html>
  <head>
    <script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js">
    </script>
  
    <!-- Basic inline styling -->
    <style>
      body {
        text-align: center;
      }
  
      h1 {
        color: green;
        font-size: 40px;
      }
  
      p {
        font-size: 20px;
        font-weight: bold;
      }
  
      input {
        margin-top: 0.75rem;
      }
  
      /* To make input on focus
      look more distinct */
      input:focus {
        outline: none !important;
        border: 3px solid green;
        box-shadow: 0 0 10px green;
      }
    </style>
  </head>
  <body>
    <h1>GeeksForGeeks</h1>
    <p>How to prevent a textfield from 
       losing focus using jQuery</p>
  
    <p>
      Here, the textfield will only lose 
      focus when the word "geeks" is entered
    </p>
  
    <input type="text" class="geeks" />
    <script type="text/javascript">
      (function () {
        (".geeks").bind("blur", function (e) {
          if (!isValidString((this).val())) {
            e.preventDefault();
            (this).focus();
          }
        });
      });
        
      // Function to check whether the
      // string is "geeks" or not
      function isValidString(s) {
        return s === "geeks";
      }
    </script>
  </body>
</html>