DOM重绘对focus的影响

在处理获取焦点时一直不能获取到。

搜索了下资料是因为 当DOM的变化影响了元素的几何属性(宽和高)，浏览器需要重新计算元素的几何属性，同样其他元素的几何属性和位置也会因此受到影响。

重排：浏览器会使渲染树中受到影响的部分失效，并重新构造渲染树。

重绘：完成重排后，浏览器会重新绘制受影响的部分到屏幕中。

     重排何时发生：

• 添加或删除可见的DOM元素
• 元素位置的改变
• 元素尺寸改变
• 内容改变
• 页面渲染器初始化
• 浏览器窗口尺寸的改变

参考http://zhangyaochun.iteye.com/blog/1681641

在原来代码里使用了innreHTML来改变原有内容，我将它改为使用dom来进行操作

//要改变的内容
window.onload=function(){
    var supcodea = document.createElement("p");
    var supcode_text = document.createTextNode("*");
    supcodea.appendChild(supcode_text);
    document.getElementById("msg_code").appendChild(supcodea);
    var supnamea = document.createElement("p");
    var supname_text = document.createTextNode("*");
    supnamea.appendChild(supname_text);
    document.getElementById("msg_name").appendChild(supnamea);
}
//改变前后
function displayAjaxLoading (element,msg) {
    while (element.hasChildNodes()) {
        element.removeChild(element.lastChild);
     }
     var content = document.createElement('p');
     var content_text = document.createTextNode(msg);
     content.appendChild(content_text);
     element.appendChild(content); 
}

//应用改变
var flag=false;
        var supCode = supSaveInfo.supcode;
        var supName = supSaveInfo.supname;
        switch(true) {
            case supCode == "" || !supCode:
                var msg_codes = document.getElementById("msg_code");
                displayAjaxLoading(msg_codes,"请输入供应商代码");
                document.getElementById("supcode").focus();
                flag=true;
                break;
            default:
                var msg_codes = document.getElementById("msg_code");
                displayAjaxLoading(msg_codes,"*");
        }
        switch(true) {
            case supName == "" || !supName:
                var msg_codes = document.getElementById("msg_name");
                displayAjaxLoading(msg_codes,"请输入供应商名称");
                document.getElementById("supname").focus();
                flag=true;
                break;
            default:
                var msg_codes = document.getElementById("msg_name");
                displayAjaxLoading(msg_codes,"*");
        }
        switch(true) {
            case (supCode == "" || !supCode) && (supName == "" || !supName):
                displayAjaxLoading(msg_codes,"请输入供应商代码");
                displayAjaxLoading(msg_codes,"请输入供应商名称");
                document.getElementById("supcode").focus();
                flag=true;
                break;
            default:
                break;
    }
        /*if(supSaveInfo.supcode==""||!supSaveInfo.supcode){
            var msg_codes = document.getElementById("msg_code");
            displayAjaxLoading(msg_codes,"请输入供应商代码");
            document.getElementById("supcode").focus();
            flag=true;
            return;
        }else{
            var msg_codes = document.getElementById("msg_code");
            displayAjaxLoading(msg_codes,"*");
        }
        if(supSaveInfo.supname==""||!supSaveInfo.supname){    
            var msg_codes = document.getElementById("msg_name");
            displayAjaxLoading(msg_codes,"请输入供应商名称");
            document.getElementById("supname").focus();
            flag=true;
            return;
        }else{
            var msg_codes = document.getElementById("msg_name");
            displayAjaxLoading(msg_codes,"*");
        }*/
        if(flag){
        }else
            addSave();

    };

 

HTML

<tr style="height:28px">
				<td align="right" width="130px" height=20px><label class="Validform_label"> 供应商代码：</label></td>
				<td align="right" class="value" width="120px"><input class="inputxt" style="width: 180px; height:20px" id="supcode" name="supcode""></input></td>
				<td id="msg_code" style="color:red;width:300px"></td>
			</tr>

			<tr style="height:28px">
				<td align="right" width="130px" height=20px><label class="Validform_label">供应商名称：</label></td>
				<td align="right" class="value" width="120px"><input class="inputxt" style="width: 180px; height:20px" id="supname" name="supname""></input></td>
				<td id="msg_name" style="color:red;width:300px"></font></td>
			</tr>

 

这样就可以了。