テキストエリアのカーソルがフィールドの最後に到達するかどうかを確認するには？

Question

この例では、カーソルが届くかまたは送信ボタンをタッチしたときに余白を追加したいときに、余白を追加するために必要な送信ボタンをタッチします。現在のfacebookコメントフィールドと同様に、カーソルがステッカーや絵文字のアイコンに触れたとき、アイコンはフィールドの下に移動します。ここで

autosize($('textarea'));

textarea { width:99%;min-height:15px } 
 
div { position:relative } 
 
button { position:absolute;right:10px;bottom:8px }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://rawgit.com/jackmoore/autosize/master/dist/autosize.min.js"></script> 
 

 
<div> 
 
<textarea class="textarea"></textarea> 
 
<button> 
 
Send 
 
</button> 
 
</div>

Answer 1

あなたが探しているもの、それを試してみるです：

autosize($('textarea')); 
 

 
$("#send").on('click', function() { 
 
    console.log("You clicked send!!"); 
 
    callSendFunction(); 
 
}); 
 

 
$('.textarea').keypress(function(e) { 
 
    if (e.which == 13) { 
 
    console.log("You hit enter!!"); 
 
    callSendFunction(); 
 
    } 
 
}); 
 

 
function callSendFunction() { 
 
    console.log('Yay, we got it. Do something here.. '); 
 
}

textarea { 
 
    width: 99%; 
 
    min-height: 15px 
 
} 
 

 
div { 
 
    position: relative 
 
} 
 

 
button { 
 
    position: absolute; 
 
    right: 10px; 
 
    bottom: 8px 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://rawgit.com/jackmoore/autosize/master/dist/autosize.min.js"></script> 
 

 
<div> 
 
    <textarea class="textarea"></textarea> 
 
    <button id="send"> 
 
Send 
 
</button> 
 
</div>

Answer 2

ハード最大

<textarea NAME="myTextArea" ROWS="5" WRAP="HARD"></textarea> 
<script> 
var numCols = document.getElementById('myTextArea').cols; 
document.getElementById('myTextArea').cols=numCols-7; 
</script> 

012にテキストエリアをラップ