可拖动的 jquery ui 触摸防止专注于 Chrome 上的输入

Posted 2023-05-08

【中文标题】可拖动的 jquery ui 触摸防止专注于 Chrome 上的输入

【英文标题】：Draggable jquery ui touch preventing focus on input on Chrome

【发布时间】：2021-09-16 12:21:46

【问题描述】：

由于我使用 jquery.ui.touch-punch 脚本在触摸设备上启用 jquery UI 拖动功能，我无法点击我的输入，也无法选择。

这是我正在使用的库：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui-touch-punch/0.2.3/jquery.ui.touch-punch.min.js"></script>

<script>
        $( function() 
            $( "#draggable" ).draggable(
            )
        );
</script>

在我的身体里，我有：

<div class="block3 ui-widget-content" id="draggable">
<div class="col">
                            <select class="form-select text-uppercase">
                                <option value="" selected>P</option>
                                <option value="">G</option>
                      <option value="">M</option>
                            </select>
                        </div>
<div class="col">
                                <div class="input-group">
                                    <input type="text" class="form-control" placeholder="Code">
                                    <span class="input-group-text"><i class="fas fa-sync"></i></span>
                                </div>
                            </div>  
                            <div class="col">
                                <div class="input-group">
                                    <input type="text" class="form-control" placeholder="Code agent">
                                    <span class="input-group-text"><i class="fas fa-info-circle"></i></span>
                                </div>
                            </div>  
</diV

熟悉此脚本的人可能知道 Chrome 为何停止选择并专注于输入？任何帮助将不胜感激

【参考方案1】：

我通过添加一些 javascript 找到了输入的解决方案

<script>
    $('form').on('touchstart', 'input',function()
        $(this).focus();
    );
</script>

但我不知道如何强制选择。有什么想法吗？