+ Start a Discussion
Vivekh88Vivekh88 

Add blurred text in inputtext field using VF

Hi,
I need to fetch and add some custom field values related to Event object in Event page layout. I have created a VF page and tried to use place holders for blurred text.
<apex:page standardController="Event" cache="true" docType="html-5.0">
<apex:form>
<apex:pageBlock>
<apex:inputTextArea value="{!Event.Minutes__c}" html-placeholder="Customername" style="width: 750px; height: 150px;">
</apex:inputTextArea>
</apex:pageBlock>
</apex:form>
</apex:page>
The problem is i cant add multiple placeholders inside a textbox. i need similar kind of UI to display in my Event Standard page layout.

User-added image

So when the user enter the event record these fields needs to be populated automatically from Event (Assigned to, StratDate, EndDate, etc) and the other custom fields needs to be entered manually within the textbox. All the values needs to be stored in that particular Textbox. Whether this is possible?

Thanks
Vivek
Best Answer chosen by Vivekh88
Sunil MadanaSunil Madana
Hi Vivek, below is the jquery work-around to add blurred text to <apex:inputTextArea> field.
<apex:page id="VF_906F0000000D9P0IAK" standardController="Event" cache="true" docType="html-5.0">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
    <script>
        $(document).ready(function(){
            $('.placeholder').each(function(index, elem){
                $(elem).prop('placeholder','Customername\ntesting1\ntesting2\ntesting3\nLorem ipsum dolor sit emut\nLorem ipsum dolor sit emut\nLorem ipsum dolor sit emut\nLorem ipsum dolor sit emut\nLorem ipsum dolor sit emut');
            });
        });
    </script>
    <apex:form id="VF_Form">
        <apex:pageBlock id="VF_FormpageBlk">
            <apex:inputTextArea value="{!Event.Location}" html-placeholder="Customername" styleClass="placeholder" style="width: 750px; height: 150px;"></apex:inputTextArea>
        </apex:pageBlock>
    </apex:form>
</apex:page>
You may get all Event fields (Assigned to, StratDate, EndDate, etc) that you mentioned from your controller and assign it to this placeholder text. (There is no limit).

If the above suggestion worked, let us know by marking the answer as "Best Answer" right under the comment which will help the rest of the community should they have a similar issue in the future. 
Thanks, Sunil

All Answers

Sunil MadanaSunil Madana
Hi Vivek, below is the jquery work-around to add blurred text to <apex:inputTextArea> field.
<apex:page id="VF_906F0000000D9P0IAK" standardController="Event" cache="true" docType="html-5.0">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
    <script>
        $(document).ready(function(){
            $('.placeholder').each(function(index, elem){
                $(elem).prop('placeholder','Customername\ntesting1\ntesting2\ntesting3\nLorem ipsum dolor sit emut\nLorem ipsum dolor sit emut\nLorem ipsum dolor sit emut\nLorem ipsum dolor sit emut\nLorem ipsum dolor sit emut');
            });
        });
    </script>
    <apex:form id="VF_Form">
        <apex:pageBlock id="VF_FormpageBlk">
            <apex:inputTextArea value="{!Event.Location}" html-placeholder="Customername" styleClass="placeholder" style="width: 750px; height: 150px;"></apex:inputTextArea>
        </apex:pageBlock>
    </apex:form>
</apex:page>
You may get all Event fields (Assigned to, StratDate, EndDate, etc) that you mentioned from your controller and assign it to this placeholder text. (There is no limit).

If the above suggestion worked, let us know by marking the answer as "Best Answer" right under the comment which will help the rest of the community should they have a similar issue in the future. 
Thanks, Sunil
This was selected as the best answer
Vivekh88Vivekh88
Hi Sunil,

Thanks. But can we apply the same code for repeat tag?
<apex:page standardController="Event" extensions="MinutesController" cache="true" docType="html-5.0">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
    <script>
        $(document).ready(function(){
            $('.placeholder').each(function(index, elem){
                $(elem).prop('placeholder','Customername\ntesting1\ntesting2\ntesting3');
            });
        });
    </script>
<apex:form id="VF_Form">
<apex:pageBlock id="VF_FormpageBlk">
<apex:repeat value="{!updatedlist}" var="agn">
<apex:inputField value="{!agn.Minutes__c}" html-placeholder="Customername" style="width: 750px; height: 150px;"/>
</apex:repeat>
<apex:commandButton action="{!save}" value="Save"></apex:commandButton>
</apex:pageBlock>
</apex:form>
</apex:page>

Thanks
Vivekh
Sunil MadanaSunil Madana
Hi Vivekh, Yes the above shared code will works for repeats also. But please make sure the <apex:inputField>, <apex:inputTextarea> or any tag that you use has styleClass="placeholder" attribute. The javascript code will search for this class name and then apply the place-holder text accordingly. Thanks, Sunil.