Deform 2.0:添加 HTML5 占位符
Deform 2.0: Adding HTML5 placeholder
我正在尝试将 HTML5 占位符属性添加到 Deform 2.0 TextInputWidget
。但是我不确定是否应该支持它或者应该如何支持它,因为文档对此不是很清楚 - 似乎有一些 mask_placeholder 功能不是我想要的。
如何将 HTML5 占位符添加到变形文本输入 (2.0+)?
编辑:从 Deform 2.0.7 开始,支持 HTML5 属性。
https://docs.pylonsproject.org/projects/deform/en/latest/changes.html
好的 - 诀窍是拥有自定义模板 - 变形模板尚不支持占位符:
<!--! This adds placeholder attribute support for TextInput.
-->
<span tal:define="name name|field.name;
css_class css_class|field.widget.css_class;
oid oid|field.oid;
mask mask|field.widget.mask;
mask_placeholder mask_placeholder|field.widget.mask_placeholder;
style style|field.widget.style;
placeholder field.widget.placeholder|nothing;
type field.widget.type|'text';
"
tal:omit-tag="">
<input type="${type}" name="${name}" value="${cstruct}"
tal:attributes="class string: form-control ${css_class};
style style;
placeholder placeholder;"
id="${oid}"/>
<script tal:condition="mask" type="text/javascript">
deform.addCallback(
'${oid}',
function (oid) {
$("#" + oid).mask("${mask}",
{placeholder:"${mask_placeholder}"});
});
</script>
</span>
然后您可以将小部件定义为:
class InviteFriends(CSRFSchema):
email = c.SchemaNode(
c.String(),
missing=None,
validator=c.Email(),
widget=w.TextInputWidget(template="textinput_placeholder", type="email", placeholder="Friend's email"),
)
phone_number = c.SchemaNode(
c.String(),
missing=None,
validator=c.Length(min=7),
widget=w.TextInputWidget(template="textinput_placeholder", type="tel", placeholder="Friend's phone number"),
)
我正在尝试将 HTML5 占位符属性添加到 Deform 2.0 TextInputWidget
。但是我不确定是否应该支持它或者应该如何支持它,因为文档对此不是很清楚 - 似乎有一些 mask_placeholder 功能不是我想要的。
如何将 HTML5 占位符添加到变形文本输入 (2.0+)?
编辑:从 Deform 2.0.7 开始,支持 HTML5 属性。
https://docs.pylonsproject.org/projects/deform/en/latest/changes.html
好的 - 诀窍是拥有自定义模板 - 变形模板尚不支持占位符:
<!--! This adds placeholder attribute support for TextInput.
-->
<span tal:define="name name|field.name;
css_class css_class|field.widget.css_class;
oid oid|field.oid;
mask mask|field.widget.mask;
mask_placeholder mask_placeholder|field.widget.mask_placeholder;
style style|field.widget.style;
placeholder field.widget.placeholder|nothing;
type field.widget.type|'text';
"
tal:omit-tag="">
<input type="${type}" name="${name}" value="${cstruct}"
tal:attributes="class string: form-control ${css_class};
style style;
placeholder placeholder;"
id="${oid}"/>
<script tal:condition="mask" type="text/javascript">
deform.addCallback(
'${oid}',
function (oid) {
$("#" + oid).mask("${mask}",
{placeholder:"${mask_placeholder}"});
});
</script>
</span>
然后您可以将小部件定义为:
class InviteFriends(CSRFSchema):
email = c.SchemaNode(
c.String(),
missing=None,
validator=c.Email(),
widget=w.TextInputWidget(template="textinput_placeholder", type="email", placeholder="Friend's email"),
)
phone_number = c.SchemaNode(
c.String(),
missing=None,
validator=c.Length(min=7),
widget=w.TextInputWidget(template="textinput_placeholder", type="tel", placeholder="Friend's phone number"),
)