Question

我有一个“消息”页面，可以对每条消息发表评论。我正在做一个类似facebook的textarea，当你关注时它显示提交按钮，当你onblur它再次隐藏它。到目前为止，我尝试了一些不同的东西：

<script type="text/javascript">
function focusTextarea(id) {
        var form = document.forms[id];

       //Create an input type dynamically.
        var element = document.createElement("input");

        //Assign different attributes to the element.
        element.setAttribute("type", "submit");0
        element.setAttribute("value", "Post comment");
        element.setAttribute("name", "createComment");
        element.setAttribute("class", "okButton");
        element.setAttribute("id", "test");

        var foo = document.getElementById("commentButton");

        //Append the element in page (in span).
        form.appendChild(element);

}

function unFocusTextarea(id) {
    var test = document.getElementById(id);

    var foo = document.getElementById("commentButton");
    var foo2 = document.getElementById("test");

    foo.removeChild(foo2);
}
</script>

参数id是表单名称和id。在第一个函数中，我想找到表单并插入一个提交按钮。第二个功能我想再次找到表格并删除按钮。

提前致谢

Answer 1

对于您想要做的事情，您不应该创建和删除对象，您可以使用CSS隐藏对象。如果需要，可以将DOM元素的.style.display属性设置为"none"，将其所有子元素隐藏，并在需要时显示""。

至于你当前的代码，我认为document.forms没有你认为它做的。表单不是范围，它是一个DOM元素，您最好像其他任何一样引用它：document.getElementById("formid")。

Answer 2

我看不到你喜欢用

指出的内容

document.getElementById("commentButton");

但是，这应该是一个简单的方法：

function unFocusTextarea(id) {
var form = document.getElementById(id);
if(form.lastChild.name=="createComment")form.removeChild(form.lastChild)
}

由于按钮（如果存在）始终是表单的lastChild，它只需要查看此lastChild并检查name-attributes是否与给定值（createComment）匹配。如果是，则该按钮将被删除。

Answer 3

使用jquery结束：

function focusTextarea(id) {
    if($("#"+id+" #comment_"+id).val() == "Write a comment..") {
        $("#"+id+" #comment_"+id).val("");
        $("#"+id+" #commentTools_"+id).append("<input type='checkbox' name='createPrivate' value='1'> <span class='normal'>Private</span><br><input type='submit' name='createSubmit' value='Post comment' class='okButton'>");
        $("#"+id+" #comment_"+id).rows = 5;
    }
}

function unFocusTextarea(id) {
    if($("#"+id+" #comment_"+id).val() == "Write a comment.." || $("#"+id+" #comment_"+id).val() == "") {
        $("#"+id+" #commentTools_"+id).empty();
        $("#"+id+" #comment_"+id).val("Write a comment..");
    }
}

非常感谢：）

在动态创建的表单中添加和删除输入元素

3 个答案: