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>

这样就可以了。