2013-08-01 44 views
0

我的頁面上有一些文本框,其中焦點文字清晰可見。我想到了如何在用戶輸入中將字體更改爲黑色,但是我無法弄清楚如果用戶清除輸入的文本框時如何將字體顏色設置爲銀色。在用戶輸入中清除了初始幻影文本並將字體顏色更改爲黑色

$(document).ready(function() { 
    $('input:text').focus(function() { 
     $(this).val(''); 
     if ((this).val !== '') { 
      $(this).css('color', 'black'); 
     } 
    }); 
}); 

CSS:

input[type="text"] { 
    color: #C0C0C0; 
    text-align: center; 
    font-size:18px; 
    height: 30px; 
    width: 150px; 
    -webkit-border-radius: 5px; 
    -moz-border-radius: 5px; 
    border-radius: 5px; 
} 

樣品文本標記:

<asp:TextBox 
    ID="txtLastName" 
    runat="server" 
    MaxLength="50" 
    onblur="if(this.value == ''){ (this.value = 'Last Name';) (this.css ('color', 'silver');)}" 
    onfocus="if(this.value == 'Last Name'){this.value = '';}" 
    Text="Last Name"> 
</asp:TextBox> 

回答

2

您是否嘗試過你所有的jQuery onBlur和onFocus進入你的代碼的jQuery部分?

$(document).ready(function() { 
    $('input:text').blur(function() { 
     if ($(this).val == '') { 
      $(this).val = "Last Name"; 
      $(this).css('color', 'silver'); 
     } 
    }); 
    $('input:text').focus(function() { 
     if($(this).val == 'Last Name') { 
      $(this).val = ""; 
      $(this).css('color', 'black'); 
     } 
    }); 
}); 
1

你可以使用新的HTML5

任何幫助將在包頭理解

的Jquery地點持有人屬性。

1

使用佔位符屬性,而不是所有這一切,Visual Studio將可能波浪線它是錯的,但它仍然在大多數瀏覽器正常工作(除非你正在使用VS2012則其識別它。

<asp:TextBox 
    ID="txtLastName" 
    Placeholder = "Last Name" 
    runat="server" 
    MaxLength="50" 
    onblur="if(this.value == ''){ (this.value = 'Last Name';) (this.css ('color', 'silver');)}" 
    onfocus="if(this.value == 'Last Name'){this.value = '';}" 
    Text="Last Name"> 
</asp:TextBox> 

當用戶刪除方框中的所有文本時,佔位符將返回,只是不要使用這個來代替標籤,它不是屏幕閱讀器友好的(既不是屏幕閱讀器友好的方式)也不是屏幕閱讀器友好的方式

相關問題