js實作input輸入框點選變大縮小-js教程-PHP中文網

一、input輸入框點選變大縮小的js程式碼

首頁

web前端

js教程

js實作input輸入框點選變大縮小

Mar 07, 2018 pm 05:07 PM

input javascript

本文主要跟大家分享js實作input輸入框點選變大縮小的實例程式碼，希望能幫助大家。

一、input輸入框點選變大縮小的js程式碼

html中

&lt;style type=&quot;text/css&quot;&gt;
input[type=&#39;text&#39;] {
	width: 100px;
	height: 30px;
	border-radius: 5px;
}
&lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;

	&lt;p&gt;
		标题:&lt;input class=&quot;InputTitle&quot; value=&quot;&quot; type=&quot;text&quot; /&gt;
	&lt;/p&gt;
	
	&lt;!-- js响应&quot;内容&quot;输入框变大事件:src=&quot;/js/article/change_input.js&quot; --&gt;
	&lt;p&gt;
		内容:&lt;input class=&quot;InputContent&quot;  value=&quot;&quot; type=&quot;text_content&quot; /&gt;
	&lt;/p&gt;

登入後複製

js程式碼中

$(document).ready(function() {
	$(&quot;input[type=&#39;text_content&#39;]&quot;).focus(function() {
		$(this).animate({
			&quot;width&quot; : &quot;400px&quot;,
			&quot;height&quot; : &quot;70px&quot;
		})
	}).blur(function() {
		$(this).animate({
			&quot;width&quot; : &quot;100px&quot;,
			&quot;height&quot; : &quot;30px&quot;
		})
	});
});

登入後複製