ホームページ > 記事 > ウェブフロントエンド > jsで入力ボックスをクリックすると拡大・縮小されるように実現します
jsで入力ボックスをクリックすると拡大・縮小されるように実現します
- 小云云オリジナル
- 2018-03-07 17:07:564360ブラウズ
この記事では主に入力ボックスのクリックによる拡大・縮小を実現するjsサンプルコードを紹介しますので、お役に立てれば幸いです。
1. クリックすると入力ボックスを大きくしたり小さくしたりする 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 サイトの他の関連記事を参照してください。
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。