如何通过if条件设置文本框样式 弹窗打开即显示红框红底高亮

你之前的代码把高亮类的添加、移除逻辑绑定在了focus（获得焦点，即点击输入框）、blur（失去焦点，即点输入框外区域）事件上，这类事件只有用户操作输入框时才会触发，弹窗打开时没有触发对应事件，自然不会自动显示样式。另外你写的.focused样式类只定义了红色边框，没加背景色属性。

1. 补全CSS样式 #

给高亮类加上背景色属性，建议用半透浅红，避免遮挡输入框文字：

.focused {
  border: solid 1px red;
  background-color: rgba(255, 0, 0, 0.15); /* 需要纯红背景直接替换为#ff0000即可 */
}

2. 改写AJAX回调逻辑 #

去掉事件绑定写法，拿到接口返回的用户状态后，直接判断状态给输入框加/删样式类，逻辑在弹窗弹出前就执行完，打开弹窗就能直接看到效果。同时每次执行先清空旧状态，避免弹窗复用时残留上次的样式：
把你原来success回调里判断data.userstatus的整段代码替换为：

success:function(data){  
  // 先清空输入框旧值和旧样式，防止状态残留
  $('#user_status').val('').removeClass('focused');
  // 赋值状态值
  $('#user_status').val(data.userstatus);
  // 直接根据状态判断是否加高亮，不需要等用户点击
  if(data.userstatus == 'Active'){
    $('#user_status').addClass('focused');
  }

  $('#employee_id_return').val(data.row_id);  
  $('#insert').val("Update");
  $('#add_data_Modal').modal('show'); 
},
error: function(req, status, error) {
  alert(req.responseText);      
}   

3. 补全新增弹窗的样式重置 #

你原来点新增按钮打开弹窗时只重置了表单值，没清除高亮样式，补上这行避免样式串用：

$('#add').click(function(){  
  $('#insert').val("Insert");  
  $('#insert_form')[0].reset();
  // 新增弹窗默认清除状态高亮
  $('#user_status').removeClass('focused');
});

注意：你最开始贴的输入框代码ID是user_type，后面JS里选的是user_status，记得确认两个ID保持一致，否则会选不到元素导致样式不生效。

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