Change color of input widget when user input
Application Type
Traditional Web

Hi all.

How I change color background of input widget when the user enter any character?

Thanks and best regard.

Hi Dang!

I created a test using inline CSS style to add this feature.

  • I used the input and gave it a name (so I can use ajax refresh).
  •  In the extended properties I used the Length() function for my variable that is being filled in the input (to check that it has characters) and if it has more than 1 char (not empty) then my inline CSS is going to change the input background-color (in this case I did red but you can use any hexadecimal code or RGB).
  • In order for this change to occurr we need to do the ajax refresh (in Reactive this would be done automatically - no need for OnChange).

Here is a print screen with the development. Try it on your environment :)

The inline CSS could also be a class, instead of the background-color property, if you want to add more css properties to the input when it is filled or if you want to replicate the background behaviour to other inputs. You set the background color on the class and if you want to change it later on you don't need to change all the input inline background property, only the CSS background color of the class.

If you any question let me know :)

 Hope it helped!

Best regards,

Clarisse

Thanks you so much. 

However,is there a way to not use the action? using javascript for example.


Hi Dang,

You can use if condition in style class of input widget, 

Background {color:red}

If (input.typedValue="", default class,Background)

Hope this help,

Regards,

Komal

@Clarisse Carneiro the @Komal Kumbhar answer will solve your issue.

Thanks @Clarisse Carneiro @Komal Kumbhar @Miguel Verdasca
the problem has been resolved.

Best Regards, 

Dang

Hi Dang,

Using of Client side JavaScript you can achieve  this requirement

 1. create JavaScript like this



2.call JavaScript function 


3. when user press key its color change in my case even and odd data colour change 


Great. Thanks you so much. 

Himanshu Verma


Community GuidelinesBe kind and respectful, give credit to the original source of content, and search for duplicates before posting.