ホームページ  >  記事  >  ウェブフロントエンド  >  jQuery が自動的に拡張するテキスト入力ボックスの実装 code_jquery

jQuery が自動的に拡張するテキスト入力ボックスの実装 code_jquery

WBOY
WBOYオリジナル
2016-05-16 18:30:19917ブラウズ

ユーザー エクスペリエンスを向上させるために、昼休みに jQuery を使用してプラグインを作成できないか考えました。やってみようかなと思っていたら、案の定、この機能に気づきました。このプラグインを書いているとき、インターネット上で誰かがそのようなプラグインを書いているはずだと無意識に思いましたが、検索しませんでした。興味があれば探してください。以下はプラグインのソースコードです。
ソースコード

コードをコピー コードは次のとおりです。

;(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 jQuery( this).attr("size", _settings.min);
return this(_handler)
}; (jQuery) ;


メソッドを呼び出します: $(':text').autoSizeText();
このプラグインには 2 つのオプションのパラメータがあります: max (テキスト ボックスの最大サイズを設定します。サイズはこの値を超えて増加しません。デフォルト値は 40) と min (テキスト ボックスの最小サイズを設定します。これはテキスト ボックスの初期サイズでもあります)、デフォルト値は 20)、呼び出し時に変更できます。
例: $(':text').autoSizeText({min:24,max:35});
$(':text').autoSizeText({max:35});//minなし 設定します。デフォルト値 20 を使用します。
$(':text').autoSizeText({min:12});//最大値は設定されていません。デフォルト値 40 を使用します。
これを拡張し続けることができます。ベース (例: Support textarea)。
楽しんでください!
声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。