Skip to Content
avatar image
Former Member

How to change color of a placeholder of an input field in ui5?

Hi All,

We often get requirements from client where they want to highlight the placeholder of input field.

I have an input field. Its placeholder color has to be changed to 'RED' so that user understands that its a mandatory field.

Could you please help me out on how can i change this feature.

I have seen blog related to html5, but not sure in ui5 how to handle it.

Awaiting replies.

Thanks,

Zakeer

Add comment
10|10000 characters needed characters exceeded

  • Get RSS Feed

5 Answers

  • Oct 19, 2015 at 07:10 AM

    Hi

    there are a few ways to do this.

    Here they are

    1. JS Bin - Collaborative JavaScript Debugging

    2. JS Bin - Collaborative JavaScript Debugging

    I prefer 2 because you can reuse  the control in many places and have the same behavior

    Thanks

    -D

    Add comment
    10|10000 characters needed characters exceeded

  • Oct 19, 2015 at 06:50 AM
    Add comment
    10|10000 characters needed characters exceeded

  • Oct 19, 2015 at 06:50 AM

    Hallo Zakeer

    You can use the value state function in SAPUI5.

    Example:

    Field must be numeric:

    //View:
    tfdPreCalibration = new sap.ui.commons.TextField({
    id : "PreCalibration",
    required : true,
    change : function() {
      if (this.getValue() === "") {
       this.setValueState(sap.ui.core.ValueState.Error);//red
      } else {
       this.setValueState(sap.ui.core.ValueState.None);//normal
      }
    }
    });

    //Controller: (on submit)
    var testPreCalibration = sap.ui.getCore().getControl("PreCalibration").getValue();
    if ( ! sap.ui.controller(<mycontroller>).isNumberFieldValid(testPreCalibration) ){
    sap.ui.getCore().getControl("PreCalibration").setValueState(sap.ui.core.ValueState.Error);
    }

    There is also a yellow warning state

    Hope this helps

    Antonette


    pre before.png (24.9 kB)
    pre after.png (31.4 kB)
    Add comment
    10|10000 characters needed characters exceeded

  • Oct 19, 2015 at 06:28 AM

    Hi Zakeerhusen,

    This is possible using custom CSS so you'll have to add your own html classes to the input fields where you want to have this effect.

    Good luck!

    Best regards,

    Maarten

    Add comment
    10|10000 characters needed characters exceeded

  • Oct 19, 2015 at 06:33 AM

    Hi Zakeer,


    Will this help? JS Bin - Collaborative JavaScript Debugging


    Regards,

    Sai Vellanki.

    Add comment
    10|10000 characters needed characters exceeded