この記事では主に入力ボックスのクリックによる拡大・縮小を実現するjsサンプルコードを紹介しますので、お役に立てれば幸いです。
html 内
<style type="text/css">
input[type='text'] {
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='text_content']").focus(function() {
$(this).animate({
"width" : "400px",
"height" : "70px"
})
}).blur(function() {
$(this).animate({
"width" : "100px",
"height" : "30px"
})
});
});関連する推奨事項:
入力ボックスのファジープロンプト機能を実装するための JavaScript コード
クリックダウンを実装するJS 選択した内容を入力入力ボックスに同期させるメニューの例
入力入力ボックス内のカーソルサイズ表示の不一致を解決する方法
以上がjsで入力ボックスをクリックすると拡大・縮小されるように実現しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
