Xpages: change background color of edit box

问题

I hope this is a simple question :o)

I have an Edit Box on an xPage called "name" that is a required field. I would like the background to be (light) red when there is no text in the field and white once the user starts typing. Basically what I want is for the users to see that any field that has a red background is a required field. I assumed that I could just calculate the style at run-time - but I cannot find the way to do this. Does anybody have code to do this?

Thanking you in advance Ursus

回答1:

Add a styleClass "required" to your Edit Box field and give it in css a red background color.

Delete on onkeyup event on client side the class "required" when field is not empty and add it back when field is empty again.

This is a working example as a starting point:

<xp:inputText
    id="inputText1"
    value="#{viewScope.test}"
    required="true"
    styleClass="xspInputFieldEditBox required">
    <xp:eventHandler
        event="onkeyup"
        submit="false">
        <xp:this.script><![CDATA[
            var element = document.getElementById("#{id:inputText1}");
            if (element.value == "") {
                dojo.addClass(element, "required");
            } else{
                dojo.removeClass(element, "required");
            }
        ]]></xp:this.script>
    </xp:eventHandler>
</xp:inputText>

.required {
    background: red;
}

You should add the code into a CSJS script library as a function and call it with the control id parameter #{id:inputText1} so that it is easy to use for all required fields.

来源：https://stackoverflow.com/questions/24657347/xpages-change-background-color-of-edit-box

标签

xpages