jQuery 自動(dòng)增長的文本輸入框?qū)崿F(xiàn)代碼

更新時(shí)間：2010年04月02日 22:23:25 作者：

文本輸入框內(nèi)的字?jǐn)?shù)不能確定，而input type="text"的size是固定的，當(dāng)字?jǐn)?shù)超過size時(shí)（默認(rèn)是20），先輸入的內(nèi)容就會從文本框的左端隱藏起來，不便于輸入。

為了提高用戶體驗(yàn)，我在午休時(shí)候想起了是不是可以用jQuery寫個(gè)插件。想到不如做到，果然，我實(shí)現(xiàn)了這個(gè)功能。在寫這個(gè)插件時(shí)我潛意識里想到這樣的插件網(wǎng)上應(yīng)該有人寫過，不過我并沒有去搜索，你有興趣可以找一找。下面是插件的源代碼。
源代碼

復(fù)制代碼代碼如下:

 
;(function($) { 
$.fn.autoSizeText = function(settings) { 
var _defaultSettings = {min:20,max:40}; 
var _settings = $.extend(_defaultSettings, settings); 
var _handler = function() { 
jQuery(this).keyup(function() { 
if (jQuery(this).attr("type") != 'text') { 
return false; 
} 
jQuery(this).attr("size", _settings.min); 
var actLength = jQuery(this).val().length; 
if (actLength > _settings.min && actLength < _settings.max) { 
jQuery(this).attr("size", actLength + 1); 
} else if (actLength <= _settings.min) { 
jQuery(this).attr("size", _settings.min); 
} 
}); 
}; 
return this.each(_handler); 
}; 
})(jQuery); 

調(diào)用方法：$(':text').autoSizeText();即可。
本插件有兩個(gè)可選參數(shù)：max(設(shè)置文本框最大的size，超過此值不再size增長，默認(rèn)值40)和min（設(shè)置文本框最小的size，同時(shí)也是文本框的初始size，默認(rèn)值為20），在調(diào)用時(shí)可以修改。
例如：$(':text').autoSizeText({min:24,max:35});
$(':text').autoSizeText({max:35});//min沒有設(shè)置，取默認(rèn)值20
$(':text').autoSizeText({min:12});//max沒有設(shè)置，取默認(rèn)值40
你可以在此基礎(chǔ)上繼續(xù)擴(kuò)展，例如可以支持textarea。
enjoy it!

您可能感興趣的文章:

相關(guān)文章

基于jquery的15款幻燈片插件
幻燈片效果通常用于展示相冊圖片或特色推薦內(nèi)容。一個(gè)漂亮的幻燈片更能吸引訪客的注意力。本文里面，收集了15款jquery幻燈片插件，讓你的圖片展示更漂亮，讓你的特色內(nèi)容更吸引人。
2011-04-04
jquery中使用循環(huán)下拉菜單示例代碼
這個(gè)下拉菜單式可以循環(huán)的，且是使用jquery實(shí)現(xiàn)，很實(shí)用，大家可以學(xué)習(xí)下
2014-09-09
快速掌握jquery分頁插件jqPaginator的使用方法
這篇文章主要幫助大家快速掌握jquery分頁插件jqPaginator的使用方法，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2017-08-08
jQuery中filter()和find()的區(qū)別深入了解
一直不是很清楚filter()方法和find()方法的區(qū)別，看jQuery Cookbook一書后，終于算是搞清楚了，下面將新的與大家分享下
2013-09-09
Jquery多選框互相內(nèi)容交換的實(shí)例代碼
這篇文章介紹了Jquery多選框互相內(nèi)容交換的實(shí)例代碼，有需要的朋友可以參考一下
2013-07-07
Jquery實(shí)現(xiàn)點(diǎn)擊切換圖片并隱藏顯示內(nèi)容(2種方法實(shí)現(xiàn))
電腦屏幕大小是固定的，那么如何在有限的空間放更多的內(nèi)容呢，jquery的tab切換式瀏覽卻可以解決這個(gè)問題
2013-04-04
jquery+css3實(shí)現(xiàn)的經(jīng)典彈出層效果示例
這篇文章主要介紹了jquery+css3實(shí)現(xiàn)的經(jīng)典彈出層效果,結(jié)合實(shí)例形式分析了jquery+css3實(shí)現(xiàn)彈出層具體原理、步驟與相關(guān)操作技巧,需要的朋友可以參考下
2020-05-05
jQuery實(shí)現(xiàn)checkbox的簡單操作
這篇文章主要介紹了jQuery實(shí)現(xiàn)checkbox的簡單操作，對復(fù)選框組的全選、全不選、不全選，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2017-11-11
jQuery檢測返回值的數(shù)據(jù)類型
本文給大家介紹的是一種檢測返回值的數(shù)據(jù)類型的方法，有需要的小伙伴可以參考下。
2015-07-07
Jquery原生態(tài)實(shí)現(xiàn)表格header頭隨滾動(dòng)條滾動(dòng)而滾動(dòng)
表頭是浮動(dòng)的，因?yàn)閮?nèi)容在同一頁面展示，當(dāng)滾動(dòng)時(shí)，看不到列頭，為了改動(dòng)少只能使用jquery原生態(tài)實(shí)現(xiàn)滾動(dòng)
2014-03-03