TextBox

/***

    TextBox(id, class, text)

    (optional) id: str

    (optional) class : str

    (optional) text : str

***/

var id = $id ?? @id;
var class = $class;
var text = $text ?? '';
var width = $width;
var height = $height;

if(text != '') {
    <input id=(id) width=(web.size(width)) height=(web.size(height)) class=(class) value=(text) type="text" ctor="
        var val = {{ text }};
        when($this.focus) {
            if($this.val() == val) {
                $this.css({ 'color': '#000000', 'font-style': 'normal' });
                $this.val('');
            }
            $this.css({ 'background-color': '#EEF1F8' })
        }
        when($this.blur) {
            if($this.val() == '') {
                $this.css({ 'color': '#778899', 'font-style': 'italic' });
                $this.val(val);
            }
            $this.css({ 'background-color': '#FFFFFF' });
        }
    "/>
} else {
    <input id=(id) width=(width) height=(height) class=(class) type="text" ctor="
        var val = {{ text }};
        when($this.focus) $this.css({ 'background-color': '#EEF1F8' })
        when($this.blur) $this.css({ 'background-color': '#FFFFFF' });
    "/>
}