使用jQuery focusout/blur事件时，输入框验证不通过无法保留焦点的问题

我来帮你搞定这个问题～你的代码在线能跑但本地不行，大概率是几个细节没处理好，咱们一步步来排查：

首先，修复事件参数的低级错误 #

你写的回调函数里参数是evnt，但内部用的是event，这会导致event.preventDefault()直接报错（因为event根本没定义）！在线环境可能靠浏览器的全局event对象凑合用，但本地环境（比如开启了严格模式）就直接罢工了。先把参数名统一：

$(document).ready(function(){
 $("#txt_fname").on("focusout", function(event){
  if ($(this).val() !== "name"){
   event.preventDefault();
   $("#txt_fname").focus();
   return false;
  }
 });
});

然后，处理focusout事件的时序坑 #

focusout是元素失去焦点后才触发的，你直接在这个事件里调用focus()，浏览器的事件队列可能会把这个操作覆盖掉，导致焦点拉不回来。咱们加个极短的延迟，让浏览器先处理完当前的焦点切换流程，再强制把焦点拉回来：

$(document).ready(function(){
 $("#txt_fname").on("focusout", function(event){
  const $input = $(this);
  if ($input.val() !== "name"){
   event.preventDefault();
   // 延迟10ms，给浏览器一点处理时间
   setTimeout(() => {
     $input.focus();
   }, 10);
   return false;
  }
 });
});

最后，检查本地环境的常见问题 #

• jQuery加载顺序：一定要确保加载jQuery的<script>标签在你的自定义脚本前面！如果自定义脚本先跑，$会直接报未定义，代码完全不执行。
• 浏览器缓存：本地XAMPP经常会缓存旧脚本，按Ctrl+F5强制刷新页面清缓存试试。
• 看控制台报错：按F12打开开发者工具，切到Console标签，看看有没有红报错（比如jQuery没加载、变量未定义），这是排查本地问题最快的方式。

另外，你也可以试试换成blur事件，它和focusout的区别是不冒泡，有时候能避免一些奇怪的事件冲突：

$(document).ready(function(){
 $("#txt_fname").on("blur", function(){
  const $input = $(this);
  if ($input.val() !== "name"){
   setTimeout(() => {
     $input.focus();
   }, 10);
  }
 });
});

内容的提问来源于stack exchange，提问作者Ramesh Moorthy