function readOnly(count){ }
Sign Up ›
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
Learn More

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
Ishan K SharmaIshan K Sharma 

Display default value in the inputField in a blur format

Hi

 

How to have a default value in the inputField in Visualforce in a blur format, For e.g. to enter a Number field : the value should be 'Enter a Number'.

 

As soon as the user clicks to enter the value in the inputField, it should not display anything.

Any advice.

 

Thanks

Ishan Sharma

prakash_sfdcprakash_sfdc

You can achieve this with the help of jQuery/Javascript. Try the following:
<style type="text/css">
input.watermark { color: #999; }
</style>

&lt;script type="text/javascript">
$(document).ready(function() {

var watermark = 'Enter a Number';

//init, set watermark text and class
$('.numberInput').val(watermark).addClass('watermark');

//if blur and no value inside, set watermark text and class again.
$('.numberInput').blur(function(){
if ($(this).val().length == 0){
$(this).val(watermark).addClass('watermark');
}
});

//if focus and text is watermrk, set it to empty and remove the watermark class
$('.numberInput').focus(function(){
if ($(this).val() == watermark){
$(this).val('').removeClass('watermark');
}
});
});
</script>

<apex:inputText value="{!price}" styleClass="numberInput"/>

 

Please give kudos if it helps.

 

Cheers!
Ishan K SharmaIshan K Sharma

Hi Techaddict

Thanks for reply

 

I dont have knowledge of javascript and i paste this code,but its not working. i want to ask could it also depend on the placement of <script> in vf page. i place it in form and my inputtext is in pageblocksection. 
prakash_sfdcprakash_sfdc

Place the script at the top:

<apex:page...>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">....</script>
<apex:form>...</apex:form>

make sure your apex:inputText has a id.
prakash_sfdcprakash_sfdc

Another simple method is as follows:

 

<script>

window.onload=function(){
var x=document.getElementById("fname");
x.value='aaa';
};
</script>

<body>

Enter your name: <input type="text" id="fname" onFocus="this.value='';">

 

</body>