How to trigger click event in textarea?
I tried:
jquery
$(document).ready(function(){
$('#txtid').val('something');
$('#txtid').trigger('click');
});
html
<textarea id='txtid' rows='5' cols='20'></teaxtarea>
But the click is not happened. What is wrong in the code.
I tried the focus event like this
$('#txtid').focus(); //this worked
But i need to trigger a click event after getting the value to textarea.
Please help..
How to trigger click event in textarea?
I tried:
jquery
$(document).ready(function(){
$('#txtid').val('something');
$('#txtid').trigger('click');
});
html
<textarea id='txtid' rows='5' cols='20'></teaxtarea>
But the click is not happened. What is wrong in the code.
I tried the focus event like this
$('#txtid').focus(); //this worked
But i need to trigger a click event after getting the value to textarea.
Please help..
Share Improve this question asked Dec 11, 2014 at 13:59 SanthucoolSanthucool 1051 gold badge1 silver badge10 bronze badges 1- Triggering an event will run the defined function - not the native function. – tymeJV Commented Dec 11, 2014 at 14:02
6 Answers
Reset to default 3You have to set a click event handler first.
Edit 1: Since you try to trigger the click event within document ready, you have to declare the click event handler within the document ready event handler, even before you trigger it.
Html:
<textarea id='txtid' rows='5' cols='20'></textarea>
jQuery:
$(document).ready(function(){
$('#txtid').click(function() { alert('clicked'); });
$('#txtid').val('something');
$('#txtid').trigger('click');
});
Fiddle: http://jsfiddle/j03n46bf/
Edit 2:
Since you want the event to be triggered after you get a value to your textarea, Milind Anantwar is right, you have to use the onchange event:
Same Html, different jQuery:
$(document).ready(function(){
$('#txtid').change(function() { alert('Value changed'); });
$('#txtid').val('something');
$('#txtid').trigger('change');
});
Fiddle: http://jsfiddle/sb2pohan/
Edit 3:
After some ments:
$(document).ready(function(){
$('#txtid').click(function() { changeDiv(); });
$('#txtid').focus(); // Set Focus on Textarea (now caret appears)
$('#txtid').val('something'); // Fill content (caret will be moved to the end of value)
$('#txtid').trigger('click'); // Click Handler will be executed
});
function changeDiv() {
// do some stuff;
}
Edit 4: Working test.html (Tested in IE, FF, Chrome):
<html>
<head>
<script type="text/javascript" src="http://code.jquery./jquery-1.11.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#txtid").click(function() { changeDiv(); });
$("#txtid").focus();
$("#txtid").val("value");
$("#txtid").trigger("click");
});
function changeDiv() {
$('#changeDiv').css("background-color","red");
$('#changeDiv').html("changed content");
}
</script>
</head>
<body>
<textarea id="txtid"></textarea>
<div id="changeDiv" style="background-color: green; width: 100px; height: 100px;">start content</div>
</body>
</html>
You probable need to trigger change event:
$('#txtid').trigger('change');
To see it works first define click listener, then trigger the click event.
http://jsfiddle/gfkjs5ps/
$(document).ready(function(){
$('#txtid').val('something');
$('#txtid').click(function(){alert("clicked");}); //define click listener
$('#txtid').click(); //click text area
});
As the documentation says, the event click/Change needs exits to that works so your Javascrtipt should be:
$(document).ready(function(){
$('#txtid').val('something');
$('#txtid').on('change', function(){
alert('hi!!!!!');
})
$('#txtid').trigger('change');
});
LIVE DEMO
For native Javascript is working for me:
document.querySelector('textarea').select();
Simply $('#txtid').click(); will trigger the click event.