search

Home >Web Front-end >JS Tutorial >js realizes the input box to be enlarged and reduced when clicked

js realizes the input box to be enlarged and reduced when clicked

小云云
小云云Original
2018-03-07 17:07:564437browse

This article mainly shares with you the js example code that realizes the input box to be enlarged and reduced by clicking on it. I hope it can help everyone.

1. Click the input input box to enlarge and shrink the js code

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 code

$(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"
		})
	});
});

Related recommendations:

Javascript code implements the fuzzy prompt function of the input input box

JS implements an example of clicking the drop-down menu to synchronize the selected content to the input input box

How to solve the problem of inconsistent cursor size display in the input input box

The above is the detailed content of js realizes the input box to be enlarged and reduced when clicked. For more information, please follow other related articles on the PHP Chinese website!

Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：Hibernate configurationNext article：Hibernate configuration

Related articles

See more