How to have additional attributes on text input

Suite and Optimus Suite 5
#1

Now HTML5 introduces more attributes such as “placeholder”. I want to have an input on dhtmlx form that can render like

But if I directly add placeholder to the form definition, it won’t render.
{type: “input”, name: “tel”, label: “Tel.”, placeholder:“Enter your phone number”}

#2

It can be done with custom item type create. Please find more information here docs.dhtmlx.com/doku.php?id=dhtm … ustom_item

#3

Can I somehow extend the text input, rather than write a prototype item from scratch?

#4

I came up with this custom type “input5” that extends the built-in input type.

Some usage:

  1. Email field with placeholder:
{type: "input5", label: "Email", placeholder: "Please enter your email", autofocus: true, override_type: "email"}

will render as

<input type="email" placeholder="Please enter your email" autofocus="" />
  1. Spin number box (only works on Opera AFAIK)
{type: "input5", label: "Rating", min:"1", max:"10", step:"1", override_type: "range"}

will render as

<input type="range" min="1" max="10" step="1" />
dhtmlXForm.prototype.items.input5 = {
  
  render: function(item, data) {
    
    item._type = "input5";
    item._enabled = true;
    
    this.doAddLabel(item, data);
    real_type = "text";
    if(typeof data['override_type'] !== 'undefined'){
      real_type = data['override_type'];
    }
    this.doAddInput(item, data, "INPUT", real_type, true, true, "dhxlist_txt_textarea");
    this.doAttachEvents(item);
    
    item._value = (data.value||"");
    item.childNodes[1].childNodes[0].value = item._value;
    
    this.setAttribute(item, data, 'placeholder');
    this.setAttribute(item, data, 'min');//mobile only
    this.setAttribute(item, data, 'max');//mobile only
    this.setAttribute(item, data, 'step');//mobile only
    
    this.setNoValueAttribute(item, data, 'autofocus');
    this.setNoValueAttribute(item, data, 'required');
    
    return this;
    
  },
  
  setAttribute: function(item, data, attr) {
    if(typeof data[attr] !== 'undefined')
      item.childNodes[1].childNodes[0].setAttribute(attr, data[attr]); 
  }, 
  
  setNoValueAttribute: function(item, data, attr) {
    if(typeof data[attr] !== 'undefined')
      item.childNodes[1].childNodes[0].setAttributeNode(document.createAttribute(attr)); 
  }
};

(function(){
  for (var a in {doAddLabel:1,doAddInput:1,doAttachEvents:1,destruct:1,doUnloadNestedLists:1,setText:1,getText:1,setValue:1,getValue:1,updateValue:1,enable:1,disable:1,setWidth:1,setReadonly:1,isReadonly:1,setFocus:1,getInput:1})
    dhtmlXForm.prototype.items.input5[a] = dhtmlXForm.prototype.items.input[a];
})();