首页
学习
活动
专区
圈层
工具
发布
社区首页 >问答首页 >Deform 2.0:添加HTML5占位符

Deform 2.0:添加HTML5占位符
EN

Stack Overflow用户
提问于 2015-06-24 06:37:49
回答 1查看 309关注 0票数 3

我正在尝试添加HTML5占位符属性以变形2.0 TextInputWidget。但是,我不确定是否应该支持这一点,或者应该如何支持这一点,因为文档对此并不十分清楚--似乎有一些mask_placeholder特性,这并不是我想要的。

如何添加HTML5占位符以变形文本输入(2.0+)?

EN

回答 1

Stack Overflow用户

回答已采纳

发布于 2015-06-24 08:28:12

编辑:从Deform 2.0.7开始,支持HTML5属性。

https://docs.pylonsproject.org/projects/deform/en/latest/changes.html

好的-诀窍是有一个自定义模板- Deform模板还没有支持占位符:

代码语言:javascript
复制
<!--! 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>

然后,您可以将小部件定义为:

代码语言:javascript
复制
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"),
    )
票数 4
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/31019326

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档