Focus Textarea auf Mobile von Click-Ereignis mit jQuery .trigger()

Question

Alrighty, ich stecke fest.

Ich versuche verzweifelt, auf einen Textbereich programmgesteuert von Javascript (jQuery) auf dem Handy zu konzentrieren. Ich habe meine Nachforschungen gemacht und gelernt, dass die einzige Möglichkeit, die Tastatur mit .focus() zu verwenden, ein Klickereignis ist. Also habe ich ein Klick-Event gemacht. Und es funktioniert, wenn ich auf das Element klicke, außer dass ich dies von einem Touchhold auf einem anderen Element auslösen muss. Also habe ich natürlich trigger() und .triggerHandler() für das Element ausprobiert. Aber beides funktioniert nicht.

TLDR; Ich muss in der Lage sein, ein Element aus einer Liste zu halten, und nach einiger Zeit wird ein Div mit einem Textbereich nach unten gleiten und der Textbereich wird fokussiert (mit Tastatur).

Jede Hilfe wird geschätzt!

Hier ist mein Code:

<div class="quicknote" data-id="0"> 
    <span>New Note</span> 
    <div class="name"></div> 
    <textarea class="text"></textarea> 
    <div class="toolbar"> 
     <div class="left cancel">cancel</div> 
     <div class="right finish">finish</div> 
    </div> 
</div> 

jQuery

jQuery(document).ready(function($) { 
    var holdThresh = 800; 
    $(".row").on("touchstart", function(e) { 
    var id = $(this).attr("data-id"); 
    var name = $(this).html(); 
    $(this).addClass("down"); 
    var timer = setTimeout(function() { 
     $(".quicknote").attr("data-id", id); 
     $(".quicknote .name").html(name); 
     $(".quicknote").addClass("open"); 
     $(".quicknote").trigger("click"); 
     e.preventDefault(); 
    }, holdThresh); 

    $(this).one("touchend touchmove", function(event) { 
     $(this).removeClass("down"); 
     clearTimeout(timer); 
    }) 

    $(".quicknote .cancel").on("touchstart", function() { 
     $(".quicknote").removeClass("open"); 
    }) 

    $(".quicknote").click(function(event) { 
     $("textarea").focus(); 
     event.preventDefault(); 
     event.stopPropogation(); 
    }) 
}); 

Answer 1

ich es herausgefunden! Für alle, die diese findet, hier ist meine aktualisiert jQuery:

$(".row").on("touchstart", function(e) { 
    var id = $(this).attr("data-id"); 
    var name = $(this).html(); 
    var go = true; 
    var focus = false; 

    $(this).addClass("down"); 

    var timer = setTimeout(function() { 
     go = false; 


     $(".quicknote").attr("data-id", id); 
     $(".quicknote .name").html(name); 
     $(".note").val(""); 

     $(".quicknote, .overlay").addClass("open"); 
     focus = true; 

     e.preventDefault(); 
    }, holdThresh); 

    $(this).one("touchmove", function(event) { 
     go = false; 
     $(this).removeClass("down"); 
     clearTimeout(timer); 
    }); 

    $(this).one("touchend", function() { 
     if (go) window.location = "view.php?id=" + id; 
     else { 
      if (focus) { 
       $(".note").focus(); 
       focus = false; 
      } 
      $(this).removeClass("down"); 
      clearTimeout(timer); 
     } 
    }) 
}) 

Ich bin nicht genau sicher, warum dies funktioniert, sondern einen Klick auf ein drittes Element der Auslösung auf das Textfeld zu konzentrieren uns dann, ich eine Flag gesetzt "var focus", und basierend auf einigen Bedingungen, war es in der Lage, das Textfeld vom Touchend-Ereignis zu fokussieren. Hoffe das hilft jemandem! :)