是否可以在Salesforce中为字段添加样式？

Question

我有一种情况需要将输入文本转换为大写。只要我们在输入字段中输入一些文本，就需要将其转换为大写。

我们有以下css样式：

 style="text-transform: uppercase"

使用此样式，文本会自动输入大写字母，因此我们不需要做任何额外的操作，但Salesforce中没有选项可以为字段添加样式。

有没有办法实现这个目标？

Answer 1

不幸的是，没有一种简单的方法可以将CSS样式添加到编辑模式下出现在标准页面布局上的字段。但是，您可能想要探索一些选项（如下所列）。

---

Visualforce

您可以在 Visualforce （http://www.salesforce.com/us/developer/docs/pages/Content/pages_compref_inputText.htm）或{中添加样式属性到[inputtext] {3}}组件。

<apex:inputtext value="{!Widget__c.Name}" style="text-transform:uppercase;" />

要添加CSS类，可以使用styleClass属性。不过，我认为这只会影响文本数据的显示。要在保存到数据库时确保该值为大写，请在onkeyup属性上使用此JavaScript（如下所示）。

<apex:inputtext value="{!Widget__c.Name}" style="text-transform:uppercase;" onkeyup="var u=this.value.toUpperCase();if(this.value!=u){this.value=u;}" />

---

标准页面布局

选项1：在标准页面布局中嵌入Visualforce页面

要在标准页面布局上执行此操作，您可以为要使用此功能的字段创建Visualforce页面。但是，这仅显示在记录视图上。它在编辑时不可见。

Visualforce页面看起来像这样（Widget__c被您正在使用的sObject替换）：

<apex:page standardController="Widget__c">
    <apex:form id="WidgetForm">
        <apex:actionFunction name="SavePost" action="{!save}" rerender="WidgetPanel" status="str" />
        <apex:outputpanel id="WidgetPanel">
            <apex:inputtext id="WidgetName" value="{!Widget__c.Name}" style="text-transform:uppercase;" onkeyup="var u=this.value.toUpperCase();if(this.value!=u){this.value=u;}" />
            <apex:commandbutton value="Save" styleClass="btn" onclick="SavePost();" />
            <apex:actionStatus startText="Loading..." stopText="" id="str"> </apex:actionStatus>
        </apex:outputpanel>
    </apex:form>
</apex:page>

然后在页面布局上，单击Visualforce Pages和Fields下的Buttons类别，并通过将Visualforce Page组件拖到Layout中将Visualforce页面添加到页面布局中。请务必通过单击新Visualforce Page组件右上角的扳手来配置它的高度。

选项2：在带有补充工具栏组件的标准页面布局上使用JavaScript

使用标准页面布局的另一个更复杂的选项是在包含JavaScript的补充工具栏上添加主页组件。此选项需要对JavaScript（或inputfield JavaScript库）的公平理解。然后，JavaScript可以找到该字段，向其添加text-transform:uppercase;样式，并将函数绑定到keyup事件，以将所有输入的字符转换为大写（element.value.toUpperCase();）。有关此方法的详细信息，请查看有关为JavaScript添加侧边栏组件的jQuery。他使用此方法显示和隐藏标准页面布局上的按钮，但可以根据您的目的进行修改。