javascript动态文本框更改焦点

时间:2012-12-07 16:29:06

标签: javascript html javascript-events onfocus

我有一个HTML表单,其中包含一些静态文本框和一个用于创建动态文本框的按钮。现在,当单击按钮时,我希望重点关注新创建的框。我正在使用focus()方法,但它无法正常工作。另一件事是我有一个onFocus()方法,它将改变在静态框中工作但不在动态框中的背景颜色

function addPhone(){
try{
    var phone = document.getElementById("phone");
    phone.appendChild(document.createElement("Phone"+noOfPhones));

    var textbox = document.createElement("input");
    textbox.setAttribute("type", "textbox");
    textbox.setAttribute("id","phone"+noOfPhones);
    textbox.setAttribute("name","phone"+noOfPhones);

    textbox.setAttributte('onFocus','onFocus(this);');
    textbox.style.background="lightgrey";

    document.getElementById("phone").appendChild(textbox);
    phone.appendChild(document.createElement("br"));

    textbox.focus();

    noOfPhones++;
}catch(err){
    alert(err);
}

}

function onFocus(element){
element.style.background = "lightgrey";
}

请帮忙。我是JS的新手。感谢

1 个答案:

答案 0 :(得分:1)

尝试:

<div id="phone"></div>
<input type="button" onclick="addPhone()" value="Add"/>
<script type="text/javascript">
var noOfPhones=0;
function addPhone(){
    try{
        noOfPhones++;
        var phone = document.getElementById("phone");
        phone.appendChild(document.createTextNode("Phone :"+noOfPhones));
        var textbox = document.createElement("input");
        textbox.setAttribute("type", "textbox");
        textbox.setAttribute("id","phone"+noOfPhones);
        textbox.setAttribute("name","phone"+noOfPhones);
        textbox.setAttribute('onfocus','onFocus(this, true);');
        textbox.setAttribute('onblur','onFocus(this, false);');
        textbox.style.background="white";
        document.getElementById("phone").appendChild(textbox);
        phone.appendChild(document.createElement("br"));
        textbox.focus();
    }catch(err){
        alert(err);
    }
}

function onFocus(element, hasFocus){
if(hasFocus)
    element.style.background = "lightgrey";
else
    element.style.background = "white";
}
</script>