javascriptjavajquerytextareaatom-editor

Can't type/click into a text area anymore due to jQuery but can't see what's causing it


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");
    });




});

Solution

  • 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.