Question

我有两个输入。我希望他们在包含默认值时有灰色文本。第一个输入有效，但是当输入在对话框中时，CSS最初不会应用。我想我可以在打开对话框时通过jQuery应用CSS，但是，似乎我不应该这样做。有什么建议吗？

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

Answer 1

看起来，style未应用 - 因为，该字段正在变得更加集中。

试试这个：

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

将css应用于对话框中的输入

1 个答案: