Again on placeholder

[Former Member]

This is a follow up on the one earlier post Adding placeholder for TextField . The placeholder method described earlier did not work on my IE8 as it does not support the placeholder option.

Now I did another work around by registering to the browser events. Might not be the best work, but still thought its worth sharing.

Most of the part is similar to the blog earlier except for the part where we extend the TextField element. So I understand that it would suffice just to share the implementation part of the MyTextField.js

MyTextField = function() {

          var text = ''; 

}

MyTextField.prototype = new sap.ui.commons.TextField();

MyTextField.prototype.setPlaceholder = function(text){

          this.text = text;

          //setting the placeholder if the TextField is blank

          if(this.getValue()==''){

                    this.setValue(text);

          }

};

MyTextField.prototype.getPlaceholder = function(){

          return this.text;

};

MyTextField.prototype.onAfterRendering = function() {

    this.$().bind("blur", jQuery.proxy(this.handleBlur, this));// could also be:  jQuery.sap.byId(this.getId).bind("click", jQuery.proxy(this.handleClick, this));

    this.$().bind("focus", jQuery.proxy(this.handleFocus, this));

 };

MyTextField.prototype.onBeforeRendering = function() {

    this.$().unbind("blur", this.handleBlur);

    this.$().unbind("focus", this.handleFocus);

 };

MyTextField.prototype.exit = function() {

    this.$().unbind("blur", this.handleBlur);

    this.$().unbind("focus", this.handleFocus);

 };

 //handling the blur event

 MyTextField.prototype.handleBlur = function(oEvent) {

            var text = this.getPlaceholder();

    if(this.getValue()==''){

              this.setValue(text);

    }

 };

 //handling the focus event

MyTextField.prototype.handleFocus = function(oEvent) {

            var text = this.getPlaceholder();

    if(this.getValue()==text){

              this.setValue('');

    }

};

Please do note that the placeholder text is set in the value of the TextField, so a check has to implemented before any submit, so that the placeholder text is not submitted.