jQuery 插件 输入框focus效果 编写自己的插件
生活随笔
收集整理的這篇文章主要介紹了
jQuery 插件 输入框focus效果 编写自己的插件
小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
在項(xiàng)目中經(jīng)常會用到 input 輸入框的默認(rèn)文字放上去消失 方便輸入新的內(nèi)容 或者有一種focus狀態(tài) 提示目前這個(gè)框是 active的
下面我們分析下這個(gè)簡單的功能 都有哪些：
1 輸入框 獲得焦點(diǎn) 如果是默認(rèn)文字 則輸入框內(nèi)容為空 方便輸入新內(nèi)容
2 輸入框獲得焦點(diǎn) 有可能要標(biāo)識 當(dāng)前獲得焦點(diǎn)的狀態(tài) 此功能可選
3 輸入框失去焦點(diǎn) 如果輸入框內(nèi)容為 默認(rèn)提示文字 或者輸入框?yàn)榭?/font> 則輸入框顯示為默認(rèn)提醒文字 比如“請輸入關(guān)鍵字”等等
我們來編寫這個(gè)叫做inputval的插件
?1?$.fn.inputval=function(className){?//className?（當(dāng)前狀態(tài)的類名）?是唯一的參數(shù)?而且可選
?2?var?_this=$(this);?//?獲取使用插件的對象
?3?className=?className?||?"";?//是否有className?參數(shù)
?4?_this.focus(function(){?//獲得焦點(diǎn)時(shí)??
?5????temval=$(this).val();?//用?temval?記載它起始的值?
?6????$(this).val("");?//清空輸入框
?7???if(className) $(this).addClass(className);?//標(biāo)識當(dāng)前輸入框
?8????})
?9????.blur(function(){?//?失去焦點(diǎn)時(shí)
10????if($(this).val()=="")?$(this).val(temval);?//如果此時(shí)沒有填寫任何東西?那么恢復(fù)初始值
11??? if(className) $(this).removeClass(className);?//取消標(biāo)識當(dāng)前狀態(tài)
12????})
13?}
使用也很簡單：
<div?class="inputcon"?id="testinput">
????<p>
????????<input?type="text"?value="原始值uuuuuu"?/>
????</p>
????<p>
????????<input?type="text"?value="原始值XXXXX"?/>
????</p>?
</div>
<script?type="text/javascript">????/*?<![CDATA[?*/?
$(document).ready(function(){
????$("#testinput").find("input").inputval("cur");?//此處?"cur"?是當(dāng)前樣式?如果不需要標(biāo)記也可以為空?
????})
/*?]]>?*/????
</script?
轉(zhuǎn)載于:https://www.cnblogs.com/trance/archive/2009/04/23/1442122.html
總結(jié)
以上是生活随笔為你收集整理的jQuery 插件 输入框focus效果 编写自己的插件的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： python语言输入两个数_python
- 下一篇： mootools脚本框架下载