變形2.0：添加HTML5佔位符

Question

我想添加HTML5佔位符屬性到變形2.0​​。但是我不確定這是否應該得到支持，或者應該如何支持，因爲文檔對此不太清楚 - 似乎有一些mask_placeholder功能不是我想要的功能。

如何將HTML5佔位符添加到變形文本輸入（2.0+）？

Answer 1

好 - 關鍵是有一個自定義模板 - 變形問題模板還不具有佔位符支持：

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