Javascript
 Computer >> コンピューター >  >> プログラミング >> Javascript

CSSでJavaScriptを使用してテキストエリアを自動拡張する

JavaScriptを使用すると、Textarea要素をそのコンテンツとともに自動的に拡大するように設定できます

次の例は、上記のシナリオを実現する方法を示しています。

例

<!DOCTYPE html>
<html>
<head>
<style>
* {
   margin: 3%;
   color: navy;
   font-size: 1.2em;
}
#ta {
   padding: 2%;
   resize: none;
   width: 330px;
   min-height: 80px;
   overflow: hidden;
   box-sizing: border-box;
}
</style>
</head>
<body>
<form>
<label for="ta">Cool TextArea</label>
<textarea id="ta"></textarea>
</form>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
$("#ta").on('input', function() {
   var scroll_height = $("#ta").get(0).scrollHeight;
   $("#ta").css('height', scroll_height + 'px');
});
</script>
</body>
</html>

出力

これにより、次の結果が生成されます-

CSSでJavaScriptを使用してテキストエリアを自動拡張する

CSSでJavaScriptを使用してテキストエリアを自動拡張する

例

<!DOCTYPE html>
<html>
<head>
<style>
div {
   margin: 3%;
   overflow-y: scroll;
}
#ta {
   padding: 2%;
   resize: none;
   width: 333px;
   min-height: 90px;
   overflow: hidden;
   box-sizing: border-box;
   font-size: 1.5em;
}
</style>
</head>
<body>
<div>
<textarea id="ta"></textarea>
</div>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
$("#ta").on('input', function() {
   var scroll_height = $("#ta").get(0).scrollHeight;
   $("#ta").css('height', scroll_height + 'px');
});
</script>
</body>
</html>

出力

これにより、次の結果が生成されます-

CSSでJavaScriptを使用してテキストエリアを自動拡張する


  1. CSSとJavaScriptを使用したライトボックスのアニメーション

    CSSとJavaScriptを使用して、Webページでライトボックスのスタイルを設定できます。次の例はライトボックスのスタイルを設定します。 例 <!DOCTYPE html> <html> <style> #parent {    margin: 2%;    padding: 0;    box-sizing: border-box;    background: cornflowerblue;    text-align: center; } html,

  2. JavaScriptを使用してCSSルールをスタイルシートに追加する方法は？

    insertRule（）は、スタイルシートの定義された位置にルールを追加するのに役立ちますが、deleteRule（）は特定のスタイルを削除します。 次の例は、JavaScriptを使用してスタイルシートに追加できるCSSルールを示しています。 例 <!DOCTYPE html> <html> <head> <style type="text/css" id="custom"> body {    background-color: silver; } </style> &