Onchange Event for Text Area

Question

Onchange Event for Text Area

13.2k Views Asked by Sam M At 15 April 2025 at 08:37

I have been trying to use and onchange event on a text area however nothing has been working. the normal change() or onChange() functions do nothing at all.

I have Tried things like

$('#areaName').on('input', function(){})
$('#areaName').bind('input', function(){})

I have tried eveything solution i have found online to no avail.

I just need the piece of code to trigger a function when the text in the text area has been modified in anyway.

Original Q&A

There are 4 best solutions below

**Ajay Narain Mathur** · Answer 1

Use keyboard Events, plunker:

js:

$(document).ready(function(){
  $("#area").on("keypress",function(){
    alert("hello")
  })

})

If you use jqueryui you can capture resize event as:

 $("#area").resizable({
    resize: function() {
        alert("hello2")
    }
 });

**Ritesh Karwa** · Answer 2

Try this:

 <!DOCTYPE html>

    <head>
      <meta charset="utf-8">
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
      <script src="//cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/js/select2.min.js"></script>
      <script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.12.0/jquery.validate.min.js" type="text/javascript"></script>
      <script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
      <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
      <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
    <style>

    </style>
    </head>
    <body>

     <textarea rows="4" cols="50" id="textArea">

     </textarea>
    <script>
      $(document).ready(function(){
        $('#textArea').bind('input propertychange', function() {
          console.log(this.value);
        });
      });
    </script>
    </body>
    </html>

**AudioBubble** · Answer 3

AudioBubble On 25 June 2015 at 05:04

The below code working as expected, Tested in Firefox

   $(function ()
    {
        $('#areaName').change(function () {
            alert($('#areaName').val());
        });
    });

**Hink** · Answer 4

Hink On 22 April 2017 at 10:00

This works for me in Firefox:

 <textarea oninput="alert('input detected')";>initial input text</textarea>

Onchange Event for Text Area

There are 4 best solutions below

Related Questions in JAVASCRIPT

Related Questions in EVENTS

Related Questions in TEXTAREA

Related Questions in ONCHANGE

Trending Questions

Popular # Hahtags

Popular Questions