Xpages:更改编辑框的背景颜色 [英] Xpages: change background color of edit box

问题描述

我希望这是一个简单的问题 :o)

I hope this is a simple question :o)

我在 xPage 上有一个名为name"的编辑框，它是必填字段.当字段中没有文本时，我希望背景为(浅)红色，而一旦用户开始输入，则为白色.基本上我想要的是让用户看到任何具有红色背景的字段都是必填字段.我假设我可以在运行时计算样式 - 但我找不到这样做的方法.有没有人有代码可以做到这一点?

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?

提前致谢乌萨斯

推荐答案

将 styleClass required" 添加到您的编辑框字段，并在 css 中为其设置红色背景色.

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

在客户端的 onkeyup 事件上删除字段不为空时的必需"类，并在字段再次为空时将其添加回来.

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;
}

您应该将代码作为函数添加到 CSJS 脚本库中，并使用控件 id 参数 #{id:inputText1} 调用它，以便它易于用于所有必填字段.

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.

这篇关于Xpages:更改编辑框的背景颜色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！