テキスト領域の右下にあるテキスト領域にテキストを追加するにはどうすればよいですか？

Question

入力可能な文字数をユーザーに表示したいのですが、これを新しい行の後ろのテキスト領域の右下に配置したいと思います。とにかくテキストエリアが変更された後にそれをリフレッシュします。私はそれを上記の位置に置くことについて助けが必要です。

Answer 1

function countChar(val){ 
 
    var len = val.value.length; 
 
\t 
 
    if (len >= 50) { 
 
       val.value = val.value.substring(0, 50); 
 
    } else { 
 
       $('#charNum').text(50 - len); 
 
    } 
 
};

.main{ 
 
    position: relative; 
 
    display: inline-block; 
 
} 
 
.main textarea{ 
 
    height: 100px; 
 
    width: 100px; 
 
    resize: none; 
 
} 
 
.main span{ 
 
    color: coral; 
 
    position: absolute; 
 
    bottom: 5px; 
 
    right: 10px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="main"> 
 
    <textarea class="textareatest" onkeyup="countChar(this);"></textarea> 
 
    <span id="charNum">50</span> 
 
</div>

Answer 2

これは次のようなもので実現できます。

function count(){ 
 
    document.getElementById('textarea').onkeyup = function() { 
 
    document.getElementById('count').innerHTML = this.value.length; 
 
}; 
 
    }

.main{ 
 
    position: relative; 
 
    display: inline-block; 
 
} 
 
.main textarea{ 
 
    height: 100px; 
 
    width: 200px; 
 
    resize: none; 
 
} 
 
.main span{ 
 
    color: coral; 
 
    position: absolute; 
 
    bottom: 5px; 
 
    right: 5px; 
 
}

<div class="main"> 
 
    <textarea id="textarea" onclick="count()"></textarea> 
 
    <span id="count">0</span> 
 
</div>

Answer 3

あなたはこのようにいろいろ書い操作を行うことができます。

<div class="form-block"> 
    <textarea></textarea> 
    <div class="label"></div> 
</div> 

そしてCSSで：

.form-block { 
    position: relative; 
} 

.label { 
    bottom: 5px; 
    position: absolute; 
    right: 5px; 
}