Creating an edit-box in Smart Pascal
Under HTML5 there is a special property that you can add to any suitable tag, such as the DIV tag, to make the content editable. In other words you are no longer bound to the restrictions of text-fields and memo-fields as was the case earlier.
Setting up the target
All components and controls in Smart Pascal has a method called StyleTagObject(), this method is called at the beginning of the constructor (after the element has been created and a handle-reference is obtained) so the user, which is you and me, can set properties and values before the html element is finalized and made visible.
Note: You can set properties and attributes at any time, but it makes sense to alter the different values before the component becomes visible. This is why I added StyleTagObject() to the construction sequence.
Turning an element editable is very easy. Simply override the StyleTagObject() method as such:
procedure TMyControl.StyleTagObject; Begin inherited; w3system.w3_setAttrib(handle,'contenteditable',True); end;
In this case we alter the html-element property “contenteditable” to true, which depending on the element, turns the object into a text-editor. Since TW3CustomControl is set to create a DIV element by default (this can be altered easily as well) the result is something that looks like a normal memo editor in Delphi. But without any scrollbars of course.
You may also want to add a call to setFocus() in the mouseDown events if you are building a composite control (e.g an editor, scrollbars and other stuff inside a custom control).
And that’s how easy it is to play with the DOM and create an editable custom HTML5 control!