<style>
.hint {
color: gray;
}
</style>
var hintClassName="hint";
var domainNamesHint = "this is a line for water mark";
YAHOO.util.Event.onDOMReady(function () {
// initial water mark
showWaterMark(Get(formName+'_domainNames'), domainNamesHint);
// water mark event
YAHOO.util.Event.on(Get(formName+'_domainNames'), "focus", focusAction);
YAHOO.util.Event.on(Get(formName+'_domainNames'), "blur", blurAction);
});
///--------------- Domain Names: WaterMark -----------------///
function focusAction(e) {
hideWaterMark(this.id);
}
function blurAction(e) {
showWaterMark(this.id, domainNamesHint);
}
function hideWaterMark(elementId) {
var el = Get(elementId);
if(el) {
if(YAHOO.util.Dom.hasClass(el, hintClassName)) {
YAHOO.util.Dom.removeClass(el, hintClassName);
el.value = "";
}
}
}
function showWaterMark(elementId, text) {
var el = Get(elementId);
if(el) {
var value = el.value;
if (value.length == 0 || value.trim().length == 0) {
YAHOO.util.Dom.addClass(el, hintClassName);
el.value = text;
}
}
}
<s:textarea name="domainNames" cssStyle="width: 260px;" rows="4"/>