当焦点返回到发送元素时，模糊在 IE 中无法按预期工作

Question

我正在做一些 JQuery 验证，如果验证失败，我想防止用户离开存在验证问题的元素（使用 $(this).focus().select()）。作为一些用户反馈，我还想使用 CSS 将其他输入框变灰。 （即在问题解决之前，所有其他输入框都是灰色的。）

这在 Chrome 中运行良好，但在 IE 中它只会使 next 输入变灰，而不是当我将焦点返回到原始输入时所有这些输入。 （如果我删除 $(this).focus().select() 样式按预期工作，但光标没有“锁定”到输入。）

如何确保跨浏览器的一致性？

我使用的代码是：

$(".TimeEntry").blur(function(){
   if ($(this).val()){
      $('input').not(this).addClass('disabledClass');
      $(this).focus().select();
    } else {
      $('input').not(this).removeClass('disabledClass');
    }
}); 

（出于演示目的，我所做的所有“验证”都是确保输入框中没有任何内容。任何输入都将无法通过验证。）

见https://jsfiddle.net/bdgriffiths/6g4rkcme/4/

Answer 1

我不知道为什么它在IE 浏览器中不起作用。我以不同的方式对其进行了测试，但都失败了。我认为这是IE 中的一个错误。

但是，您可以编写一个解决方法。如上所述，我为您创建了一个小提琴。它在IE 浏览器中的作用相同，只是方式不同。

见下面的 sn-p

$(".TimeEntry").focusout(function(){
   if ($(this).val()){
   		// Workaround for IE
   		if(MSIE() === 1) {
      	// This fixes the `tab` key cant be pressed when disabled.
      	$(document).keydown( function() {
          if($(this).val().length < 1) {
          	// If length of value smaller than 1 (aka 0) then set disabled false. So the tab key will work again.
            $('input').not(this).prop('disabled', false);
          }
        });
      	$('input').not(this).prop('disabled', true);
      } else {
      	// For chrome, firefox etc.
      	$('input').not(this).addClass('disabledClass');
      }
      
      // Works for all browsers.
      $(this).focus().select();
    } else {
    	if(MSIE() === 1) {
      	$('input').not(this).prop('disabled', false);
      } else {
      	$('input').not(this).removeClass('disabledClass');
      }
    }
}); 

function MSIE() {
	if (navigator.appName == 'Microsoft Internet Explorer' ||  
  !!(navigator.userAgent.match(/Trident/) || 
  navigator.userAgent.match(/rv:11/)) || 
  (typeof $.browser !== "undefined" && $.browser.msie == 1)) {
  	
    return 1;
	} else {
  	return 0;
  }
}

td {
  width: 100px;
  height: 70px;
}

body {
  font-family: arial;
}

.disabledClass {
  background-color: #eee;
  color: #ccc;
  border: 1px solid #ccc
}

a {
  text-decoration: none;
  color: black;
}

#triangle-right {
  width: 0;
  height: 0;
  border-top: 10px solid transparent;
  border-right: 8px solid red;
  border-bottom: 10px solid transparent;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tr>
    <td>
      <input class="TimeEntry" id="tb1" style='width:50px' />
    </td>
    <td>
      <input class="TimeEntry" id="tb2" style='width:50px' />
    </td>
    <td>
      <input class="TimeEntry" id="tb3" style='width:50px' />
    </td>
  </tr>
  <tr>
    <td>
      <input class="TimeEntry" id="tb4" style='width:50px' />
    </td>
    <td>
      <input class="TimeEntry" id="tb5" style='width:50px' />
    </td>
    <td>
      <input class="TimeEntry" id="tb6" style='width:50px' />
    </td>
  </tr>
  <tr>
    <td>
      <input class="TimeEntry" id="tb7" style='width:50px' />
    </td>
    <td>
      <input class="TimeEntry" id="tb8" style='width:50px' />
    </td>
    <td>
      <input class="TimeEntry" id="tb9" style='width:50px' />
    </td>
  </tr>
</table>

我所做的只是检查用户正在访问您的网站的浏览器。如果它的IE 将input 字段设置为disabled，而不是使用CSS 为禁用的输入字段设置动画。

如果用户使用任何其他浏览器访问，请按照您自己编写的方式进行操作。哪个有效。