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)容就會(huì)從文本框的左端隱藏起來，不便于輸入。
為了提高用戶體驗(yàn)，我在午休時(shí)候想起了是不是可以用jQuery寫個(gè)插件。想到不如做到，果然，我實(shí)現(xiàn)了這個(gè)功能。在寫這個(gè)插件時(shí)我潛意識(shí)里想到這樣的插件網(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();即可。
本插件有兩個(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!
源代碼
復(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!
您可能感興趣的文章:
- 詳解jQuery UI庫中文本輸入自動(dòng)補(bǔ)全功能的用法
- jQuery實(shí)現(xiàn)文本框郵箱輸入自動(dòng)補(bǔ)全效果
- jquery 實(shí)現(xiàn)輸入郵箱時(shí)自動(dòng)補(bǔ)全下拉提示功能
- jquery.fastLiveFilter.js實(shí)現(xiàn)輸入自動(dòng)過濾的方法
- PHP結(jié)合jQuery.autocomplete插件實(shí)現(xiàn)輸入自動(dòng)完成提示的功能
- jQuery實(shí)現(xiàn)感應(yīng)鼠標(biāo)動(dòng)畫效果自動(dòng)伸長的輸入框?qū)嵗?/a>
- 基于jQuery的input輸入框下拉提示層(自動(dòng)郵箱后綴名)
- 基于jquery實(shí)現(xiàn)的類似百度搜索的輸入框自動(dòng)完成功能
- 基于jQuery的輸入框無值自動(dòng)顯示指定數(shù)據(jù)的實(shí)現(xiàn)代碼
- jquery判斷字符輸入個(gè)數(shù)（數(shù)字英文長度記為1，中文記為2，超過長度自動(dòng)截取）
- jQuery實(shí)現(xiàn)自動(dòng)輸入email、時(shí)間和域名的方法
相關(guān)文章
這篇文章主要介紹了jquery實(shí)現(xiàn)華麗的可折角廣告代碼,涉及jquery鼠標(biāo)hover事件動(dòng)態(tài)操作頁面元素樣式的技巧,可用于頁面增加廣告的視覺效果,需要的朋友可以參考下2015-09-09
jQuery實(shí)現(xiàn)用戶輸入自動(dòng)完成功能
本文介紹了jQuery實(shí)現(xiàn)用戶輸入自動(dòng)完成功能的方法。具有很好的參考價(jià)值，下面跟著小編一起來看下吧2017-02-02
jquery 可以用text()方法來取得字符串，再用length 判斷長度，然后用substring()方法格式化截?cái)?/div> 2011-09-09
jquery判斷checkbox是否選中及改變checkbox狀態(tài)的實(shí)現(xiàn)方法
下面小編就為大家?guī)硪黄猨query判斷checkbox是否選中及改變checkbox狀態(tài)的實(shí)現(xiàn)方法。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-05-05
取得id為form1的form的所有輸入變量，然后使用for循環(huán)進(jìn)行數(shù)組遍歷，具體實(shí)現(xiàn)如下，感興趣的朋友可以參考下2013-09-09
在每一個(gè)匹配元素的change事件中綁定一個(gè)處理函數(shù)。change事件會(huì)在元素失去焦點(diǎn)的時(shí)候觸發(fā)，也會(huì)當(dāng)其值在獲得焦點(diǎn)后改變時(shí)觸發(fā)。2011-09-09
jQuery計(jì)算textarea中文字?jǐn)?shù)(剩余個(gè)數(shù))的小程序
這篇文章主要介紹了jQuery計(jì)算textarea中文字?jǐn)?shù)(剩余個(gè)數(shù))的示例程序，大家參考使用吧2013-11-11
jQuery easyui的validatebox校驗(yàn)規(guī)則擴(kuò)展及easyui校驗(yàn)框validatebox用法
這篇文章主要介紹了jQuery easyui的validatebox校驗(yàn)規(guī)則擴(kuò)展及easyui校驗(yàn)框validatebox用法的相關(guān)資料,需要的朋友可以參考下2016-01-01
jquery中dom操作和事件的實(shí)例學(xué)習(xí)-表單驗(yàn)證
這個(gè)demo的效果是實(shí)現(xiàn)用戶輸入時(shí)提供實(shí)時(shí)提醒，并不一定要等到元素失去焦點(diǎn)時(shí)才提醒2011-11-11
讓網(wǎng)頁跳轉(zhuǎn)到指定位置的jquery代碼非書簽
網(wǎng)頁跳轉(zhuǎn)到指定位置，實(shí)現(xiàn)的方法有很多，本文采用最為簡單的一種，喜歡朋友可以學(xué)習(xí)下2013-09-09最新評(píng)論