Javascript动态文本框改变焦点

Question

我有一个 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 的新手。

Answer 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>