jQuery 自動增長的文本輸入框?qū)崿F(xiàn)代碼
更新時間：2010年04月02日 22:23:25 作者：
文本輸入框內(nèi)的字?jǐn)?shù)不能確定，而input type="text"的size是固定的，當(dāng)字?jǐn)?shù)超過size時（默認(rèn)是20），先輸入的內(nèi)容就會從文本框的左端隱藏起來，不便于輸入。
為了提高用戶體驗，我在午休時候想起了是不是可以用jQuery寫個插件。想到不如做到，果然，我實現(xiàn)了這個功能。在寫這個插件時我潛意識里想到這樣的插件網(wǎng)上應(yīng)該有人寫過，不過我并沒有去搜索，你有興趣可以找一找。下面是插件的源代碼。
源代碼
;(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();即可。
本插件有兩個可選參數(shù)：max(設(shè)置文本框最大的size，超過此值不再size增長，默認(rèn)值40)和min（設(shè)置文本框最小的size，同時也是文本框的初始size，默認(rèn)值為20），在調(diào)用時可以修改。
例如：$(':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!
源代碼
復(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();即可。
本插件有兩個可選參數(shù)：max(設(shè)置文本框最大的size，超過此值不再size增長，默認(rèn)值40)和min（設(shè)置文本框最小的size，同時也是文本框的初始size，默認(rèn)值為20），在調(diào)用時可以修改。
例如：$(':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!
您可能感興趣的文章:
- 詳解jQuery UI庫中文本輸入自動補(bǔ)全功能的用法
- jQuery實現(xiàn)文本框郵箱輸入自動補(bǔ)全效果
- jquery 實現(xiàn)輸入郵箱時自動補(bǔ)全下拉提示功能
- jquery.fastLiveFilter.js實現(xiàn)輸入自動過濾的方法
- PHP結(jié)合jQuery.autocomplete插件實現(xiàn)輸入自動完成提示的功能
- jQuery實現(xiàn)感應(yīng)鼠標(biāo)動畫效果自動伸長的輸入框?qū)嵗?/a>
- 基于jQuery的input輸入框下拉提示層(自動郵箱后綴名)
- 基于jquery實現(xiàn)的類似百度搜索的輸入框自動完成功能
- 基于jQuery的輸入框無值自動顯示指定數(shù)據(jù)的實現(xiàn)代碼
- jquery判斷字符輸入個數(shù)（數(shù)字英文長度記為1，中文記為2，超過長度自動截?。?/a>
- jQuery實現(xiàn)自動輸入email、時間和域名的方法
相關(guān)文章
幻燈片效果通常用于展示相冊圖片或特色推薦內(nèi)容。一個漂亮的幻燈片更能吸引訪客的注意力。本文里面，收集了15款jquery幻燈片插件，讓你的圖片展示更漂亮，讓你的特色內(nèi)容更吸引人。2011-04-04
這個下拉菜單式可以循環(huán)的，且是使用jquery實現(xiàn)，很實用，大家可以學(xué)習(xí)下2014-09-09
快速掌握jquery分頁插件jqPaginator的使用方法
這篇文章主要幫助大家快速掌握jquery分頁插件jqPaginator的使用方法，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-08-08
jQuery中filter()和find()的區(qū)別深入了解
一直不是很清楚filter()方法和find()方法的區(qū)別，看jQuery Cookbook一書后，終于算是搞清楚了，下面將新的與大家分享下2013-09-09
這篇文章介紹了Jquery多選框互相內(nèi)容交換的實例代碼，有需要的朋友可以參考一下2013-07-07
Jquery實現(xiàn)點擊切換圖片并隱藏顯示內(nèi)容(2種方法實現(xiàn))
電腦屏幕大小是固定的，那么如何在有限的空間放更多的內(nèi)容呢，jquery的tab切換式瀏覽卻可以解決這個問題2013-04-04
jquery+css3實現(xiàn)的經(jīng)典彈出層效果示例
這篇文章主要介紹了jquery+css3實現(xiàn)的經(jīng)典彈出層效果,結(jié)合實例形式分析了jquery+css3實現(xiàn)彈出層具體原理、步驟與相關(guān)操作技巧,需要的朋友可以參考下2020-05-05
這篇文章主要介紹了jQuery實現(xiàn)checkbox的簡單操作，對復(fù)選框組的全選、全不選、不全選，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-11-11
本文給大家介紹的是一種檢測返回值的數(shù)據(jù)類型的方法，有需要的小伙伴可以參考下。2015-07-07
Jquery原生態(tài)實現(xiàn)表格header頭隨滾動條滾動而滾動
表頭是浮動的，因為內(nèi)容在同一頁面展示，當(dāng)滾動時，看不到列頭，為了改動少只能使用jquery原生態(tài)實現(xiàn)滾動2014-03-03