Start new line when Enter key pressed in Multiline TextBox (TextArea) using JavaScript and jQuery

Last Reply 3 months ago By pandeyism

Posted 3 months ago

when i hit the but for next paragraph, it doesnt work on this textbox

    <script type="text/javascript">
        $(function () {
            $("[id*=Textpost]").on("keypress", function (e) {
                if (e.which != 13) {
                    var textarea = $(this)[0];
                    textarea.oninput = function () {
                        textarea.style.height = "";
                        textarea.style.height = Math.min(textarea.scrollHeight, 582) + "px";
                    };
                }
                else {
                    document.forms[0].submit();
                    return false;
                }
            });
        });
    </script>

 

<div class="col-lg-12">
    <asp:TextBox ID="Textpost" runat="server" class="form-control" placeholder="Thoughts..." Style="" Rows="1" cols="20" BorderStyle="Solid" Font-Bold="False" 
        autofocus="autofocus" Wrap="True" Width="100%" BorderColor="#8CC6FF" BorderWidth="1px" TextMode="MultiLine" onkeyup="return CountCharacters();"></asp:TextBox>
</div>

 

Posted 3 months ago Modified on 3 months ago

Hey micah,

Please use keyup instead of keypress, refer below sample.

HTML

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
    $(function () {
        $("[id*=Textpost]").on("keyup", function (e) {
            if (e.which != 13) {
                var textarea = $(this)[0];
                textarea.oninput = function () {
                    textarea.style.height = "";
                    textarea.style.height = Math.min(textarea.scrollHeight, 582) + "px";
                };
            }
            else {
                e.preventDefault();
            }
        });
    });
</script>
<div>
    <textarea name="Textpost" rows="1" cols="20" id="Textpost" class="form-control" placeholder="Thoughts..." cols="20" autofocus="autofocus" style="border-color:#8CC6FF;border-width:1px;border-style:Solid;font-weight:normal;width:100%;">
    </textarea>
</div>

Demo