使用 jQuery .trigger() 通过点击事件将文本区域聚焦在移动设备上

Question

好吧，我卡住了。

我正拼命地在移动设备上以编程方式从 javascript (jQuery) 专注于文本区域。我做了研究，了解到使用 .focus() 调出键盘的唯一方法是使用点击事件。所以我做了一个点击事件。当我点击该元素时它会起作用，除了我需要从不同元素上的触摸点触发它。所以很自然地，我在元素上尝试了 .trigger() 和 .triggerHandler() 。但这些都不起作用。

TLDR；我需要能够保持列表中的一个元素，一段时间后，div 将与 textarea 一起向下滑动并且 textarea 获得焦点（使用键盘）。

感谢任何帮助！

这是我的代码：

<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

我想通了！对于发现此内容的任何人，这是我更新的 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);
        }
    })
})

我不确定为什么会这样，但我设置了一个标志 "var focus"，并根据某些条件能够从 touchend 事件聚焦文本区域。希望这对某人有帮助！ :)

使用 jQuery .trigger() 通过点击事件将文本区域聚焦在移动设备上

Focus textarea on mobile from click event using jQuery .trigger()

javascript

mobile

jquery

textarea

focus