To improve the user experience, I thought about whether jquery can be used to write a plug-in during the lunch break. I realized this function. When writing this plug-in, I subconsciously thought someone should have written this plug-in on the Internet, but I didn't search for it. If you are interested, you can find it. Below is the plug-in's Source code .
Source Code
Copy code The Code is as follows:; (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 );
call method: $ (': text'). autosizetext.
this plug-in has two optional parameters: max (set the maximum size of the text box. If this value is exceeded, the default value is 40) and min (set the minimum size of the text box, it is also the initial size of the text box, the default value is 20), which can be modified during the call.
example: $ (': text '). autosizetext ({min: 24, Max: 35});
$ (': text '). autosizetext ({max: 35}); // Min is not set. The default value is 20.
$ (': text '). autosizetext ({min: 12}); // Max is not set. The default value is 40.
you can continue to expand on this basis. For example, textarea is supported.
enjoy it!