Home/ Questions/Q 8053369
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-05T07:49:25+00:00

I have two inputs. I wish them to have gray text when they contain

  • 0

I have two inputs. I wish them to have gray text when they contain the default value. The first input works, however, when the input is in a dialog, the CSS isn’t initially applied. I suppose I can apply the CSS via jQuery when the dialog is opened, however, seems like I shouldn’t need to do this. Any suggestions?

http://jsfiddle.net/pwdB5/

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" /> 
<title>Testing</title>  
<script src="http://code.jquery.com/jquery-latest.js"></script> 
<link type="text/css" href="http://jqueryui.com/latest/themes/base/ui.all.css" rel="stylesheet" />
<script src="http://jquery-ui.googlecode.com/svn/tags/latest/ui/jquery-ui.js"></script> 
<style type="text/css">
input.filter {
    color: #929292;
    font-size: 0.7em;
    width: 120px;
}
</style> 
<script> 
$(function(){

    $('.default-value').each(function() {
        var $t=$(this), default_value = $t.value;
        $t.focus(function() {
            $t.css('color','black');
            if(this.value == default_value) {
                $t.val('');
            }
        });
        $t.blur(function() {
            $t.css('color','#929292');
            if($.trim(this.value) == '') {
                $t.val(default_value);
            }
        });
    });

    $("#open").click(function() {$("#dialog").dialog("open");});
    $("#dialog").dialog({
        autoOpen    : false,
        modal       : true,
        open : function() {$('#dialog').find('input.filter').val('look up trade');}
    });

});
</script>
</head>

<body>
<button id="open">Click</button>
<input type="text" value="default value2" class="default-value filter" name="value2" />

<div id="dialog" title="dialog">
<input type="text" value="default value1" class="default-value filter" name="value1" />
</div>

</body> 
</html>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Its looks like, the style is not applied – because, the field is getting focused.

    Try this:

    $("#dialog").dialog({
    autoOpen    : false,
    modal       : true,
    open : function() {$('#dialog').find('input.filter').val('look up trade').blur();}
});
    • 0