Rumah > hujung hadapan web > tutorial js > js实现input输入框点击变大缩小

js实现input输入框点击变大缩小

小云云
Lepaskan: 2018-03-07 17:07:56
asal
4385 orang telah melayarinya

本文主要和大家分享js实现input输入框点击变大缩小的实例代码,希望能帮助到大家。

一、input输入框点击变大缩小的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>
Salin selepas log masuk

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"
		})
	});
});
Salin selepas log masuk

相关推荐:

javascript代码实现input输入框模糊提示功能

JS实现点击下拉菜单把选择的内容同步到input输入框内的实例

input输入框中的光标大小显示不一致应该怎么解决

Atas ialah kandungan terperinci js实现input输入框点击变大缩小. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Label berkaitan:
sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan