向文本框添加标签（以编程方式）

Posted 2023-02-16

【中文标题】向文本框添加标签（以编程方式）

【英文标题】：Adding label to a text box (programmatically)

【发布时间】：2011-11-03 15:09:38

【问题描述】：

如何：

el = new dijit.form.TextBox(label: '...' );
form.containerNode.appendChild(el.domNode);

这似乎不起作用（dojo 1.6）

【参考方案1】：

Dojo 提供 dojox.layout.TableContainer 用于自动将标签与控件配对：

var layout = new dojox.layout.TableContainer(
    showLabels: true,
    orientation: "horiz"
);

var textBox = new dijit.form.TextBox(
    name: 'text',
    title: 'My Label'
);

layout.addChild(textBox);
layout.placeAt(form.containerNode);
layout.startup();

jsfiddle（感谢模板，@jumpnett）

【讨论】：

这太棒了！但是，我认为您不再需要最后的启动电话了。希望这会有所帮助！

【参考方案2】：

我从未见过 dijit.form.TextBox 使用 lable 属性在 TextBox 旁边实际显示标签的示例。标签始终是单独的标签元素或文本节点。

我相信 TextBox 只有这个属性，因为它继承自 dijit._Widget（根据 API docs）。

要以编程方式添加标签，只需将单独的文本节点或标签元素附加到表单的 domNode：

dojo.require("dijit.form.Form");
dojo.require("dijit.form.TextBox");

function buildForm() 
    var form = new dijit.form.Form(
    , dojo.doc.createElement('div'));

    var textBox = new dijit.form.TextBox(
        name: 'text'
    , dojo.doc.createElement('input'));

    document.body.appendChild(form.domNode);
    form.domNode.appendChild(dojo.doc.createTextNode("My Label "));
    form.domNode.appendChild(textBox.domNode);


dojo.addOnLoad(buildForm);

Here 是 jsfiddle 上的完整示例。

【讨论】：

_Widget 的标签属性实际上来自dojox/layout/TableContainer 中的dojo.extend 调用。我在道场邮件列表dojo-toolkit.33424.n3.nabble.com/… 上问了同样的问题。请注意，即使使用此属性，它也不会自动显示在页面上的任何位置。

@BuffaloBuffalo 感谢您的补充见解。我昨天查看了源代码，实际上找不到任何地方定义的标签属性。

【参考方案3】：

yourPlaceholder.domNode.appendChild(dojo.doc.createTextNode("Label Text"));
yourPlaceholder.addChild(yourTextBox);

【参考方案4】：

我使用以下 sn-p 得到它：

dojo.place('<label for="field" > Label Name </label>',dojo.byId('TextField_Id'),'before');