在动态创建的表单中添加和删除输入元素
我有一个“消息”页面，可以在其中对每条消息进行评论。我正在做一个类似 facebook 的文本区域，当你聚焦时它会显示提交按钮，当你 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。在第一个函数中，我想找到表单并插入一个提交按钮。第二个功能我想再次找到表单并删除按钮。
提前致谢
I have a "messages" page where it is possible to comment on every message. I'm doing a facebook-like textarea where when you focus it shows the submit button and when you onblur it hides it again. So far i've tried some different things:
<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>
The parameter id is the form name and id. In first function i want to find the form and insert a submit button. The second function i want to again find the form and remove the button.
Thanks in advance
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（3）
对于您想做的事情，您不应该创建和删除对象，您可以简单地使用 CSS 隐藏对象。当您希望隐藏 DOM 元素及其所有子元素时，将 DOM 元素的
.style.display属性设置为"none"，并将其设置为" "当您希望它们显示时。至于您当前的代码，我认为 document.forms 并没有达到您的预期。表单不是一个范围，它是一个 DOM 元素，您最好像其他元素一样引用它：
document.getElementById("formid")。For what you want to do you shouldn't create and remove objects, you can simply hide an object using CSS. Set the
.style.displayproperty of a DOM element to"none"when you want it, and all its child elements, to be hidden, and to""when you want them to show.As for you current code, I don't think document.forms does what you think it does. A form is not a scope, it is a DOM element, and you best refer to it like any other:
document.getElementById("formid").我不明白你想指出什么
但是，这应该是一个简单的方法：
由于按钮（如果存在）始终是表单的lastChild，因此它只查看这个lastChild并检查名称属性是否匹配给定值（createComment）。如果是这样，该按钮将被删除。
I dont see what you like to point at with
However, this should be a simple way:
As the button(if he exists) is always the lastChild of the form, it only takes a look at this lastChild and checks if the name-attributes matches the given value(createComment). If it does, the button will be removed.
最终使用 jquery 代替：
无论如何谢谢:)
Ended up using jquery instead:
Thanks anyway :)