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.
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.
Share Improve this question asked Jun 25, 2015 at 4:31 Sam MSam M 6601 gold badge8 silver badges19 bronze badges 1-
How about
keypressevent? – Ajay Narain Mathur Commented Jun 25, 2015 at 4:37
4 Answers
Reset to default 2The below code working as expected, Tested in Firefox
$(function ()
{
$('#areaName').change(function () {
alert($('#areaName').val());
});
});
This works for me in Firefox:
<textarea oninput="alert('input detected')";>initial input text</textarea>
Try this:
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn./bootstrap/3.2.0/css/bootstrap.min.css">
<script src="//cdnjs.cloudflare./ajax/libs/select2/4.0.0/js/select2.min.js"></script>
<script src="http://ajax.aspnetcdn./ajax/jquery.validate/1.12.0/jquery.validate.min.js" type="text/javascript"></script>
<script src="http://code.jquery./jquery-1.11.3.min.js"></script>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn./bootstrap/3.3.4/css/bootstrap.min.css">
<script src="https://ajax.googleapis./ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn./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>
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")
}
});