I'm learning jQuery at the moment via a Front End Web Development online course. I have a text area on my webpage but since using jQuery I can't type or click into the text area. I know the problem is the jQuery code as when I deleted the link to JavaScript in HTML the text area works fine. I don't know what specifically is causing the problem within jQuery. I'll put the code below.
$(document).ready(function(){
var el = document.getElementById('text');
console.log($('.submenu a').first().text());
console.log($('.submenu a').last().text());
$(document).on('contextmenu', function(){
return false;
});
$(document).on('mousedown', function (event){
event.preventDefault();
if(event.which == 3){
$('.hidden').removeClass('shown');
if ($(event.target).is('img')){
$('.saveimg, .newtab').addClass('shown');
} else if ($(event.target).is('a')){
$('.newtab').addClass('shown');
}
console.log(event.pageY, event.pageX);
$('#context').css({
top: event.pageY,
left: event.pageX
});
$('#context').fadeIn();
return false;
}
$('#context').fadeOut();
})
$('a[href="https://google.com"]').on('click', function(event){
console.log("Linking to Google?");
return true;
});
$('[data-trigger="dropdown"]').on('mouseenter', function(){
var submenu = $(this).parent().find('.submenu');
submenu.fadeIn(350);
$('.profile-menu').on('mouseleave', function(){
submenu.fadeOut(350);
});
});
$('#prepend, #append, #replace').on('click', function(e){
e.preventDefault();
var el = $(e.currentTarget);
var action = el.attr('id');
var content = $('.text').val();
if(action == "prepend"){
console.log("Prepending...");
$('#main').prepend(content);
}
else if(action == "append"){
console.log("Appending...");
$('#main').append(content);
}
else if(action == "replace"){
console.log("Replacing...");
$('#main').html(content);
};
$('.text').val('');
});
$('textarea').focusin(function(){
console.log("Focused in on the textarea");
});
});
You have an event set to happen on a mousedown
over the whole document, and inside that event handler function you have a call to preventDefault()
which prevents other events from firing. Since <textarea>
is inside document, the mousedown
event for the document is fired instead of the textarea event. Check this fiddle for more information:
$(document).ready(function () {
var el = document.getElementById('text');
console.log($('.submenu a').first().text());
console.log($('.submenu a').last().text());
$(document).on('contextmenu', function () {
return false;
});
$(document).on('mousedown', function (event) {
event.preventDefault();
$("#events_feedback").html("Wow! I clicked on the document!");
})
$('a[href="https://google.com"]').on('click', function (event) {
console.log("Linking to Google?");
return true;
});
$('[data-trigger="dropdown"]').on('mouseenter', function () {
var submenu = $(this).parent().find('.submenu');
submenu.fadeIn(350);
$('.profile-menu').on('mouseleave', function () {
submenu.fadeOut(350);
});
});
$('#prepend, #append, #replace').on('click', function (e) {
e.preventDefault();
var el = $(e.currentTarget);
var action = el.attr('id');
var content = $('.text').val();
if (action == "prepend") {
console.log("Prepending...");
$('#main').prepend(content);
} else if (action == "append") {
console.log("Appending...");
$('#main').append(content);
} else if (action == "replace") {
console.log("Replacing...");
$('#main').html(content);
}
;
$('.text').val('');
});
$('textarea').focusin(function () {
console.log("Focused in on the textarea");
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
<p id="events_feedback">This is a test feedback from JS events.</p>
<textarea id="my_textarea"></textarea>
</body>
</html>
Note that if you comment event.preventDefault()
on $(document).on('mousedown'...)
the textarea
event starts working.