在輸入對話框中應用css

我有兩個輸入。我希望他們在包含默認值時使用灰色文本。然而，當輸入處於對話框中時，第一個輸入起作用，CSS最初不會被應用。我想我可以通過jQuery在對話框打開時應用CSS，但是，似乎我不應該這樣做。有什麼建議麼？在輸入對話框中應用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>

來源

2012-06-10 user1032531

如果追加的CSS時直接添加對話框？ $（'＃dialog'）。find（'input.filter'）。val（'look up trade'）.css（'color'，'yellow'）;,是你想要的嗎？ –

是的，但除非必要，否則不想複製代碼。我不能發音的人給出了滿意的答案。感謝您的評論。 – user1032531

它的樣子，在style不適用 - 因爲該領域是越來越集中。

試試這個：

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

來源

2012-06-10 14:29:08

在輸入對話框中應用css

回答

相關問題