CODEWITHSUNDEEP
javascriptjquery
Sora
Sora

Reputation: 2551

creating a dynamic textarea in jQuery

I am trying to create a dynamic textarea but I don't know how fix the keyup operation so the resize function would work only when a /n exist

script:

function ResizeTextArea() {

        var msgTxtHeight = $("#<%=Message_txt.ClientID %>").css("height");

        var containerDivHeight = $(".MsgDiv").css("max-height");


        if ($("#<%=Message_txt.ClientID %>").val() == "") {
            $("#<%=ConversationDIv.ClientID %>").css("height", "318px");
            $("#<%=Message_txt.ClientID %>").css("height","15px");
        }
         if (msgTxtHeight >= containerDivHeight) { return false; }
          $("#<%=Message_txt.ClientID %>").css("height", $("#<%=Message_txt.ClientID  %>").height() + 15);
           $("#<%=ConversationDIv.ClientID %>").height($("#<%=ConversationDIv.ClientID %>").height() - 15);

    }

html:

  <div id="ConversationDIv" runat="server" clientidmode="Static" style="height: 318px;
    width: 100%; overflow: auto;" class='convoDiv'>
</div>
<table border="0" width="100%">
    <tr>
        <td align="left" style="width: 91%">
        <div class="MsgDiv">
          <asp:TextBox ID="Message_txt" runat="server" Width="100%"   TextMode="MultiLine" CssClass="Messagetxt" onkeyup="ResizeTextArea();"></asp:TextBox>
          </div>
        </td>
     </tr></table>

jsfiddle:http://jsfiddle.net/49HQM/195/

Upvotes: 0

Views: 936

Answers (1)

Tushar Gupta - curioustushar
Tushar Gupta - curioustushar

Reputation: 57105

DEMO

$("#Message_txt").keyup(function (e) {
        if (e.which == 13) {
            ResizeTextArea();
        }
    });

e.which

updated after op's comment

DEMO

    function isOverflowed(element) {
        return element.scrollHeight > element.clientHeight || element.scrollWidth > element.clientWidth;
    }
 $("#Message_txt").keyup(function (e) {
        if (isOverflowed(this)) {
            ResizeTextArea();
        }
    });

Upvotes: 1

Related Questions