집 >웹 프론트엔드 >JS 튜토리얼 >js는 클릭하면 입력 상자가 확대되고 축소되도록 구현합니다.

js는 클릭하면 입력 상자가 확대되고 축소되도록 구현합니다.

小云云원래의: 2018-03-07 17:07:564372검색

이 글에서는 입력 상자를 클릭하면 확대 및 축소되도록 구현하는 js 예제 코드를 주로 공유합니다.

1 클릭 시 입력 입력 상자를 더 크고 작게 만드는 js 코드

html

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

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

js 코드

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

js는 클릭하면 입력 상자가 확대되고 축소되도록 구현합니다.

1 클릭 시 입력 입력 상자를 더 크고 작게 만드는 js 코드

관련 기사