Associated with #2745

dist/preview release/gui/babylon.gui.d.ts

@@ -602,8 +602,10 @@ declare module BABYLON.GUI {
     class InputText extends Control implements IFocusableControl {
         name: string;
         private _text;
+        private _placeholderText;
         private _background;
         private _focusedBackground;
+        private _placeholderColor;
         private _thickness;
         private _margin;
         private _autoStretchWidth;
@@ -623,6 +625,8 @@ declare module BABYLON.GUI {
         thickness: number;
         focusedBackground: string;
         background: string;
+        placeholderColor: string;
+        placeholderText: string;
         text: string;
         constructor(name?: string, text?: string);
         onBlur(): void;

dist/preview release/gui/babylon.gui.js

@@ -3793,8 +3793,10 @@ var BABYLON;
                 var _this = _super.call(this, name) || this;
                 _this.name = name;
                 _this._text = "";
+                _this._placeholderText = "";
                 _this._background = "black";
                 _this._focusedBackground = "black";
+                _this._placeholderColor = "gray";
                 _this._thickness = 1;
                 _this._margin = new GUI.ValueAndUnit(10, GUI.ValueAndUnit.UNITMODE_PIXEL);
                 _this._autoStretchWidth = true;
@@ -3895,6 +3897,34 @@ var BABYLON;
                 enumerable: true,
                 configurable: true
             });
+            Object.defineProperty(InputText.prototype, "placeholderColor", {
+                get: function () {
+                    return this._placeholderColor;
+                },
+                set: function (value) {
+                    if (this._placeholderColor === value) {
+                        return;
+                    }
+                    this._placeholderColor = value;
+                    this._markAsDirty();
+                },
+                enumerable: true,
+                configurable: true
+            });
+            Object.defineProperty(InputText.prototype, "placeholderText", {
+                get: function () {
+                    return this._placeholderText;
+                },
+                set: function (value) {
+                    if (this._placeholderText === value) {
+                        return;
+                    }
+                    this._placeholderText = value;
+                    this._markAsDirty();
+                },
+                enumerable: true,
+                configurable: true
+            });
             Object.defineProperty(InputText.prototype, "text", {
                 get: function () {
                     return this._text;
@@ -4031,7 +4061,14 @@ var BABYLON;
                     if (this.color) {
                         context.fillStyle = this.color;
                     }
-                    var textWidth = context.measureText(this._text).width;
+                    var text = this._text;
+                    if (!this._isFocused && !this._text && this._placeholderText) {
+                        text = this._placeholderText;
+                        if (this._placeholderColor) {
+                            context.fillStyle = this._placeholderColor;
+                        }
+                    }
+                    var textWidth = context.measureText(text).width;
                     var marginWidth = this._margin.getValueInPixel(this._host, parentMeasure.width) * 2;
                     if (this._autoStretchWidth) {
                         this.width = Math.min(this._maxWidth.getValueInPixel(this._host, parentMeasure.width), textWidth + marginWidth) + "px";
@@ -4051,7 +4088,7 @@ var BABYLON;
                     else {
                         this._scrollLeft = clipTextLeft;
                     }
-                    context.fillText(this._text, this._scrollLeft, this._currentMeasure.top + rootY);
+                    context.fillText(text, this._scrollLeft, this._currentMeasure.top + rootY);
                     // Cursor
                     if (this._isFocused) {
                         if (!this._blinkIsEven) {

dist/preview release/gui/babylon.gui.module.d.ts

@@ -605,8 +605,10 @@ declare module BABYLON.GUI {
     class InputText extends Control implements IFocusableControl {
         name: string;
         private _text;
+        private _placeholderText;
         private _background;
         private _focusedBackground;
+        private _placeholderColor;
         private _thickness;
         private _margin;
         private _autoStretchWidth;
@@ -626,6 +628,8 @@ declare module BABYLON.GUI {
         thickness: number;
         focusedBackground: string;
         background: string;
+        placeholderColor: string;
+        placeholderText: string;
         text: string;
         constructor(name?: string, text?: string);
         onBlur(): void;

gui/src/controls/inputText.ts

@@ -3,8 +3,10 @@
 module BABYLON.GUI {
     export class InputText extends Control implements IFocusableControl {
         private _text = "";
+        private _placeholderText = "";
         private _background = "black";   
         private _focusedBackground = "black";   
+        private _placeholderColor = "gray";   
         private _thickness = 1;
         private _margin = new ValueAndUnit(10, ValueAndUnit.UNITMODE_PIXEL);
         private _autoStretchWidth = true;        
@@ -99,7 +101,32 @@ module BABYLON.GUI {
 
             this._background = value;
             this._markAsDirty();
+        }  
+
+        public get placeholderColor(): string {
+            return this._placeholderColor;
+        }
+
+        public set placeholderColor(value: string) {
+            if (this._placeholderColor === value) {
+                return;
+            }
+
+            this._placeholderColor = value;
+            this._markAsDirty();
         }          
+        
+        public get placeholderText(): string {
+            return this._placeholderText;
+        }
+
+        public set placeholderText(value: string) {
+            if (this._placeholderText === value) {
+                return;
+            }
+            this._placeholderText = value;
+            this._markAsDirty();
+        }        
 
         public get text(): string {
             return this._text;
@@ -256,7 +283,17 @@ module BABYLON.GUI {
                     context.fillStyle = this.color;
                 }
 
-                let textWidth = context.measureText(this._text).width;   
+                let text = this._text;
+
+                if (!this._isFocused && !this._text && this._placeholderText) {  
+                    text = this._placeholderText;
+
+                    if (this._placeholderColor) {
+                        context.fillStyle = this._placeholderColor;
+                    }
+                }
+
+                let textWidth = context.measureText(text).width;   
                 let marginWidth = this._margin.getValueInPixel(this._host, parentMeasure.width) * 2;
                 if (this._autoStretchWidth) {
                     this.width = Math.min(this._maxWidth.getValueInPixel(this._host, parentMeasure.width), textWidth + marginWidth) + "px";
@@ -278,7 +315,7 @@ module BABYLON.GUI {
                     this._scrollLeft = clipTextLeft;
                 }
 
-                context.fillText(this._text, this._scrollLeft, this._currentMeasure.top + rootY);
+                context.fillText(text, this._scrollLeft, this._currentMeasure.top + rootY);
 
                 // Cursor
                 if (this._isFocused) {