是否可以向 Salesforce 中的字段添加样式? [英] Is it possible to add style to a field in Salesforce?

问题描述

我遇到了需要将输入文本转换为大写的情况.只要我们在输入字段中输入一些文本，它就需要将其转换为大写.

I have a situation where I need to convert input text to upper case. As soon as we type some text in the input field it needs to convert it to Upper case.

我们有以下 css 样式:

We have following css style for this:

 style="text-transform: uppercase"

使用此样式，文本会自动以大写形式输入，因此我们无需执行任何额外操作，但 Salesforce 中没有选项可以为字段添加样式.

Using this style, text is entered in Upper case automatically so we don't need to do anything extra, but there is no option in Salesforce to add style to a field.

有没有办法做到这一点?

Is there any way to accomplish this?

推荐答案

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

Unfortunately, there isn't an easy way to add a CSS style to a field appearing on a Standard Page Layout in edit mode. However, there are some options (listed below) you may want to explore.

您可以在 Visualforce (http://www.salesforce.com/us/developer/docs/pages/Content/pages_compref_inputText.htm) 或 <一个 href="http://www.salesforce.com/us/developer/docs/pages/Content/pages_compref_inputField.htm" rel="nofollow">inputfield 组件.

You can add a style attribute to an [inputtext] in Visualforce (http://www.salesforce.com/us/developer/docs/pages/Content/pages_compref_inputText.htm) or inputfield component.

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

要添加 CSS 类，您可以使用 styleClass 属性.不过，我相信这只会影响文本数据的显示.要确保保存到数据库时该值是大写的，请在 onkeyup 属性上使用此 JavaScript(如下).

To add a CSS class instead, you can use the styleClass attribute. I believe this affects only the display of the text data, though. To make sure the value is uppercase when saved to the database, use this JavaScript on the onkeyup attribute (below).

<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 页面.然而，这只会显示在记录的视图中.它将在编辑中不可见.

---

Standard Page Layout

Option 1: Embedding a Visualforce Page in a Standard Page Layout

To do this on a Standard Page Layout, you could create a Visualforce Page for the field you would like this functionality on. This however will show up on View of the record only. It will not be visible on Edit.

Visualforce 页面将如下所示(其中 Widget__c 被您正在使用的 sObject 替换):

The Visualforce Page would look like this (where Widget__c is replaced by the sObject you're working with):

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

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

Then on the Page Layout, click the Visualforce Pages category underneath Fields and Buttons, and add your Visualforce page to your Page Layout by dragging the Visualforce Page component to the Layout. Be sure to configure the height of it by clicking the wrench in the top right of the new Visualforce Page component.

使用标准页面布局的另一个更复杂的选项是在侧边栏上添加一个包含 JavaScript 的主页组件.此选项需要对 JavaScript(或 jQuery 一个 JavaScript 库)有一定的了解.然后 JavaScript 可以找到该字段，向其添加 text-transform:uppercase; 样式，并将函数绑定到 keyup 事件以将所有输入的字符转换为大写(element.value.toUpperCase();).有关此方法的更多信息，请查看 Tehnrd 的博客文章为 JavaScript 添加侧边栏组件.他使用这种方法来显示和隐藏标准页面布局上的按钮，但可以对其进行修改以适合您的目的.

Another, more complicated, option for working with a Standard Page Layout would be to add a Home Page Component on the Sidebar that contains JavaScript. This option requires a fair understanding of JavaScript (or jQuery a JavaScript library). The JavaScript could then find the field, add the text-transform:uppercase; style to it, and bind a function to the keyup event to convert all inputted characters to uppercase (element.value.toUpperCase();). For more information on this method, check out Tehnrd's blog post on adding a sidebar component for JavaScript. He uses this method to show and hide buttons on Standard Page Layouts, but it could be modified to suit your purposes.

这篇关于是否可以向 Salesforce 中的字段添加样式?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！