Skip to Content

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.

To report this post you need to login first.

Be the first to leave a comment

You must be Logged on to comment or reply to a post.

Leave a Reply