在項目中經常會用到 input 輸入框的默認文字放上去消失 方便輸入新的內容 或者有一種focus狀態 提示目前這個框是 active的

下面我們分析下這個簡單的功能 都有哪些：

1 輸入框 獲得焦點 如果是默認文字 則輸入框內容為空 方便輸入新內容

2 輸入框獲得焦點 有可能要標識 當前獲得焦點的狀態 此功能可選

3 輸入框失去焦點 如果輸入框內容為 默認提示文字 或者輸入框為空 則輸入框顯示為默認提醒文字 比如“請輸入關鍵字”等等

我們來編寫這個叫做inputval的插件

?1?$.fn.inputval=function(className){?//className?（當前狀態的類名）?是唯一的參數?而且可選
?2?var?_this=$(this);?//?獲取使用插件的對象
?3?className=?className?||?"";?//是否有className?參數
?4?_this.focus(function(){?//獲得焦點時??
?5????temval=$(this).val();?//用?temval?記載它起始的值?
?6????$(this).val("");?//清空輸入框
?7???if(className) $(this).addClass(className);?//標識當前輸入框
?8????})
?9????.blur(function(){?//?失去焦點時
10????if($(this).val()=="")?$(this).val(temval);?//如果此時沒有填寫任何東西?那么恢復初始值
11??? if(className) $(this).removeClass(className);?//取消標識當前狀態
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"?是當前樣式?如果不需要標記也可以為空?
????})
/*?]]>?*/????

</script?

轉載于:https://www.cnblogs.com/trance/archive/2009/04/23/1442122.html

總結

以上是生活随笔為你收集整理的jQuery 插件 输入框focus效果 编写自己的插件的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。