1. 程式人生 > >解決ie8 中 focus函式不好使問題

解決ie8 中 focus函式不好使問題

在做專案時遇到了這麼一個問題,彈出層時,自動讓文字框獲得焦點,就是$('id').focus();

可問題是次函式在ie9上好使,在ie8上不好使。後來改為js形式document.getELementById('id').focus()也不好使。

後來看到論壇討論可以通過這種方式解決:

           $("#shadeQRCodeDiv").show();
	   $('.qrCodeDiv').show('fast', function() {
		   $("#wfaId").focus();
	   });

但是專案中用到的是colorbox這個彈出層外掛。

沒辦法,只能自己寫一個遮罩了:

#shadeQRCodeDiv{ display: none;  position: absolute;  top:0px;  left:px;  width: 100%;  height: 100%;  background-color: black;  z-index:9997;  -moz-opacity: 0.15;  opacity:0.15;  filter: alpha(opacity=15);}
.qrCodeDiv{
	border: 1px solid #808080;
	overflow:hidden;
	zoom: 1;
	background:  #fff;
}
#qrCodeDiv {
	text-align: center;
	z-index:9998;
	overflow:hidden;
	width: 400px;
	height: 150px;
	left:50%;/*FF IE7*/
	top: 50%;/*FF IE7*/
	margin-left:-200px!important;/*FF IE7 該值為本身寬的一半 */
	margin-top:-75px!important;/*FF IE7 該值為本身高的一半*/
	position:absolute;
}

html 放在body標籤根下:

        <div id="shadeQRCodeDiv"></div>
	<div id="qrCodeDiv"  style="display: none;" class="qrCodeDiv">
	   <div class="grayBg">
      		<div class="toolbar">
                      <input type="button" onclick="closeSuccessDiv();" value=" <s:text name='button.cancel'/> " />
                </div>
           </div>
		<div style="margin-top:20px;">
			<b>審批單編號:</b>  <input type="text" maxlength="50" style="width:200px;" id="wfaId" name="wfaId"/>
		</div>
        </div>

js程式碼:


  function qrCode(){
	   $("#shadeQRCodeDiv").show();
	   $('.qrCodeDiv').show('fast', function() {
		   $("#wfaId").focus();
	    });
	   window.parent.layer();
   }
   function closeSuccessDiv(){
	    $("#shadeQRCodeDiv").hide();
	    $('.qrCodeDiv').hide();
	    window.parent.remove_layer();
   }
   $(function(){
		$("#wfaId").keydown(function(event){
	    	 if(event.keyCode == 13){
	    		document.dataGridForm.action = "<%=request.getContextPath()%>/system/actTask/listTasksByBusinessKey.acti                              on?wfaId=" + $('#wfaId').val();
	 	        document.dataGridForm.submit();
	     	}
	  	}); 
	});