使用 jQuery .trigger() 将文本区域从点击事件集中在移动设备上答案

【问题标题】：Focus textarea on mobile from click event using jQuery .trigger()使用 jQuery .trigger() 将文本区域从点击事件集中在移动设备上
【发布时间】：2016-07-21 14:33:00
【问题描述】：

好吧，我卡住了。

我正在拼命地从移动设备上的 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();
    })
});

【问题讨论】：

标签： javascript jquery mobile focus textarea

【解决方案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 事件中的文本区域。希望这对某人有帮助！ :)

【讨论】：