Question

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

这在Chrome中运行良好，但在IE中它只会灰显下一个输入，而不是当我将焦点返回到原始输入时所有输入。（如果我删除$(this).focus().select()样式按预期工作，但光标没有被锁定＆＃34;到输入。）

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

我使用的代码是：

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

（出于演示目的，我的所有＆＃34;验证＆＃34;正在做的是确保输入框中没有任何内容。任何条目都将无法通过验证。）

请参阅https://jsfiddle.net/bdgriffiths/6g4rkcme/4/

Answer 1

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

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

请参阅下面的代码段

$(".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为已禁用的输入字段设置动画。

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

当Focus返回发送元素时，模糊不能在IE中按预期工作

1 个答案: