jquery.ui.touch.punch.js腳本阻止觸摸設備上的輸入功能

Question

它花了我一點時間，但我發現由於touch.punch腳本我無法點擊我的輸入用於在觸控設備上啓用jQuery UI拖動功能。任何熟悉這個腳本的人都知道這可能是爲什麼？該表單實際上位於父對象的樹下。有沒有人知道我可以通過選擇覆蓋或強制的方式？我將嘗試綁定事件，強制將重點放在輸入上，但也許這裏有人有一些見解？

Answer 1

對於任何使用非常方便的touch.punch攻擊類似情況的人來說，僅僅通過點擊事件強制焦點就可以工作。這裏

$('.input').bind('click', function(){ 
    $(this).focus(); 
}); 

Answer 2

OK是另一種解決辦法，如果你的textfield任何HTML元素不聚焦，滾動，選擇的話，走動文本文本光標和任何不同的情況可能出現，那麼你可能會覆蓋jquery.ui。 touch.punch.js腳本。 我認爲你的元素不是可拖動的元素，但可能是我的情況的一個孩子。

在您的html元素上添加一個類，例如class="useDefault"。 然後到腳本文件並找到部分：

... 
function simulateMouseEvent (event, simulatedType) { 

    // Ignore multi-touch events 
    if (event.originalEvent.touches.length > 1) { 
     return; 
    } 

    event.preventDefault(); 

    var touch = event.originalEvent.changedTouches[0], 
     simulatedEvent = document.createEvent('MouseEvents'); 
.... 

正如你可能會看到event.preventDefault();確保jquery.ui.touch.punch.js 重寫瀏覽器的默認行爲。爲了防止我們的特定類節點，進行以下修改：

if (event.originalEvent.touches.length > 1) { 
    return; 
} 
var touch = event.originalEvent.changedTouches[0], 
    simulatedEvent = document.createEvent('MouseEvents'); 
//As you can see here is your class element check 
if (touch.target.className === "useDefault") { 
    event.stopPropagation(); 
} else { 
    event.preventDefault(); 
} 

該溶液與WebKit的只瀏覽器和jQuery UI的觸摸衝牀0.2.2版本進行測試。

。希望快速的解決方案幫助，BR

Answer 3

JEditable + jQuery用戶界面可排序+ jquery.ui.touch衝

我花了一整天在這個問題上，我終於想通了解決方案。解決方案與kidwon的答案非常相似。但是，我使用jeditable，它可以動態創建沒有類名稱的輸入字段。所以我用這個條件語句而不是檢查類名：

//Check if element is an input or a textarea 
if ($(touch.target).is("input") || $(touch.target).is("textarea")) { 
    event.stopPropagation(); 
} else { 
    event.preventDefault(); 
} 

我認爲這是一個更好的解決方案，因爲它總是使用任何輸入或文本區域字段的本地功能。

Answer 4

人們，這裏的另外兩個答案沒有爲我工作，但Danwilliger的解決方案工作;然而，從他的回答中不清楚如何在Touch Punch JS文件中設置它。對於未來的回答者來說，這是做什麼的。再次，這是Danwilliger的解決方案 - 我只是澄清。

更改本節jquery.ui.touch-punch.js（上大約30行）：

function simulateMouseEvent (event, simulatedType) { 

// Ignore multi-touch events 
if (event.originalEvent.touches.length > 1) { 
    return; 
} 

event.preventDefault(); 

var touch = event.originalEvent.changedTouches[0], 
    simulatedEvent = document.createEvent('MouseEvents'); 

要這樣：

function simulateMouseEvent (event, simulatedType) { 

// Ignore multi-touch events 
if (event.originalEvent.touches.length > 1) { 
    return; 
} 
var touch = event.originalEvent.changedTouches[0], 
    simulatedEvent = document.createEvent('MouseEvents'); 

//Check if element is an input or a textarea 
if ($(touch.target).is("input") || $(touch.target).is("textarea")) { 
    event.stopPropagation(); 
} else { 
    event.preventDefault(); 
} 

祝您好運！

Answer 5

感謝@Danwilliger和@jeremytripp提供的解決方案。作爲這個問題已經相識多年，但仍未工作到觸摸衝筆者的混帳回購協議，我與溶液分叉它添加在這裏：

https://github.com/copernicus365/jquery-ui-touch-punch/blob/master/jquery.ui.touch-punch.js

我將是筆者相當滿意將那幾行更改合併到原始庫中，然後將這一行變爲不必要的，但如果這種情況永遠不會發生，那麼最好有一個單獨的源文件進行引用。

Answer 6

我實際上嘗試添加Danwilliger提到的幾行，但它並沒有爲我所用。

什麼工作對我來說是

//Check if element is an input or a textarea 
if ($(touch.target).is("input") || $(touch.target).is("textarea")) { 
    event.stopPropagation(); 
    $(touch.target).focus(); 
} else { 
    event.preventDefault(); 
} 

，我真的不知道爲什麼貼在其他的答案沒有工作，但對於其他人在那裏，如果他們有同樣的問題試試我解決了:)。

Answer 7

雅各布的回答稍作修改 - 我發現使用click事件導致iPad，ios9 Safari上的行爲不一致。有時候我會在場上按一下，這會集中注意力，其他時候我不得不按三下。更改click到touchstart解決了這個問題對我來說（我還用事件代表團自從動態添加我的表單）：

$('form').on('touchstart', 'input,textarea',function(){ 
    $(this).focus(); 
}); 

Answer 8

一種解決方案是使用一個手柄。 在裏面添加一個圖標並用它來拖動。然後輸入工作正常。

<li><span class="move">Move</span><input...../></li> 

    $("#sortableList").sortable({ 

    handle: ".move" 

    }); 

Answer 9

Throttlehead的解決方案爲我工作。簡單地說，也許只是使用JQuery選擇器來覆蓋所有輸入和文本區域：

$('input,textarea').bind('click', function(){ 
    $(this).focus(); 
});