一、jQuery實現input文本框內灰色提示文本效果
Html代碼 ![收藏代碼]()
- <html>
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
- <title>input test</title>
- <script type="text/javascript"
- src="./js/jquery.js"></script>
- <script type="text/javascript">
- function inputTipText(){
- $("input[class*=grayTips]") //所有樣式名中含有grayTips的input
- .each(function(){
- var oldVal=$(this).val(); //默認的提示性文本
- $(this)
- .css({"color":"#888"}) //灰色
- .focus(function(){
- if($(this).val()!=oldVal){$(this).css({"color":"#000"})}else{$(this).val("").css({"color":"#888"})}
- })
- .blur(function(){
- if($(this).val()==""){$(this).val(oldVal).css({"color":"#888"})}
- })
- .keydown(function(){$(this).css({"color":"#000"})})
- })
- }
- $(function(){
- inputTipText(); //直接調用就OK了
- })
- </script>
- </head>
- <body>
- <input type="text" value="輸入您的用戶名" class="grayTips" />
- <input type="text" value="輸入您的登錄密碼" class="aaagrayTips"/>
- </body>
- </html>
- 二、input標籤獲取焦點是文本框內提示信息清空
- <html>
- <head>
- <title></title>
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
- </head>
- <script language="javascript" type="text/javascript">
- function addLoadEvent(func){
- var oldonload = window.onload;
- if (typeof window.onload != 'function'){
- window.onload = func;
- }else{
- window.onload = function(){
- oldonload();
- func();
- }
- }
- }
- function checkText(){
- var textId = document.getElementById('test');
- //設置文本框中的字體顏色爲灰色
- document.getElementById('test').style.color='#C0C0C0';
- var textDefault = '中文';
- function cls(){
- if (this.value == textDefault){
- this.value = '';
- }
- }
- function res(){
- if (this.value == ''){
- this.value = textDefault;
- }
- }
- textId.onfocus = cls;
- textId.onblur = res;
- }
- addLoadEvent (checkText);
- </script>
- <body>
- <input type="text" id="test" value="中文" />
- </body>
- </html>