pyramiddeform

Deform 2.0: Adding HTML5 placeholder


I am trying to add HTML5 placeholder attribute to Deform 2.0 TextInputWidget. However I am not sure if this should be supported or how this should be supported as documentation is not very clear about this - there seems to be some mask_placeholder feature which doesn't be what I want.

How to add HTML5 placeholder to Deform text input (2.0+)?


Solution

  • EDIT: As of Deform 2.0.7, HTML5 attributes are supported.

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


    Ok - the trick is to have a custom template - Deform templates did not yet have support for placeholder:

    <!--! 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>
    

    And then you can define your widget as:

    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"),
        )