18

少し時間がかかりましたが、タッチデバイスでjquery UIドラッグ機能を有効にするために使用しているtouch.punchスクリプトが原因で、入力をクリックできないことがわかりました。このスクリプトに精通している人は、なぜそうなるのか知っていますか？フォームは実際には親オブジェクトのツリーの下にあります。選択をオーバーライドまたは強制する方法を知っている人はいますか？今すぐ入力にフォーカスを強制するバインディングイベントを試してみますが、おそらくここの誰かが何らかの洞察を持っていますか？

4

9 に答える 9

19

JEdi​​table + jQuery UI Sortable + jquery.ui.touch-punch

私はこの問題に一日中費やし、ついに解決策を見つけました。解決策はキッドウォンの答えと非常に似ています。ただし、クラス名なしで入力フィールドを動的に作成するjeditableを使用していました。そのため、クラス名をチェックする代わりに、次の条件ステートメントを使用しました。

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

これは、入力フィールドまたはテキストエリアフィールドに常にネイティブ機能を使用するため、より優れたソリューションだと思います。

于 2013-03-12T23:05:33.110 に答える
13

非常に便利なtouch.punchハックを使用して同様の状況に陥る可能性がある人にとっては、クリックイベントにフォーカスを強制するだけで問題なく機能します。

$('.input').bind('click', function(){
    $(this).focus();
});
于 2012-09-21T22:53:03.197 に答える
13

皆さん、ここにある他の2つの答えは私にはうまくいきませんでしたが、Danwilligerの解決策はうまくいきました。ただし、彼の回答から、TouchPunchJSファイルでどのように正確に設定するかは明確ではありません。将来の回答を求める人のために、これが何をすべきかです。繰り返しますが、これはダンウィリガーの解決策です-私はただ明確にしています。

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();
}

頑張ってください！

于 2013-09-06T00:09:58.660 に答える
3

textfieldフォーカス、スクロール、単語の選択、テキスト内でのテキストカーソルの移動など、さまざまなシナリオが発生する可能性がある場合は、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');
....

おそらくお分かりのように、 jquery.ui.touch.punch.js がブラウザのデフォルトの動作を上書きすることをevent.preventDefault();保証します。特定のクラスノードでこれを防ぐには、次の変更を行います。

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 TouchPunch0.2.2リリースでのみテストされています。

迅速な解決策がお役に立てば幸いです、BR

于 2013-01-14T11:46:52.730 に答える
3

解決策を提供してくれた@Danwilligerと@jeremytrippに感謝します。この問題は何年も前から知られていましたが、タッチパンチの作成者のGitリポジトリにはまだ組み込まれていないため、ここに追加されたソリューションでフォークしました。

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

著者がこれらの数行の変更を元のライブラリに組み込んで、これを不要にしたことを非常に嬉しく思いますが、それが起こらない場合は、参照する単一のソースファイルがあると便利です。

于 2013-10-07T21:32:51.220 に答える
2

Jacobの答えはわずかな変更で機能しました。clickイベントを使用すると、iPad、ios9Safariで一貫性のない動作が発生することがわかりました。フィールドを1回押すとフォーカスが合うこともあれば、3回押す必要があることもありました。問題を解決するために変更clickしました（フォームが動的に追加されたため、イベント委任も使用しました）：touchstart

$('form').on('touchstart', 'input,textarea',function(){
    $(this).focus();
});
于 2016-05-18T17:04:18.080 に答える
1

1つの解決策は、ハンドルを使用することです。内部にアイコンを追加し、これを使用してドラッグします。その後、入力は正常に機能します。

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

    $("#sortableList").sortable({

    handle: ".move"

    });
于 2016-12-11T15:00:47.603 に答える
0

私は実際に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();
}

投稿された他の回答が機能しなかった理由はよくわかりませんが、同じ問題が発生している他の人は、私の解決策を試してみてください:)。

于 2015-08-11T02:12:09.490 に答える
0

Throttleheadのソリューションは私のために働いた。おそらく、JQueryセレクターを使用してすべての入力とテキストエリアをカバーする方が簡単です。

    $('input,textarea').bind('click', function(){
    $(this).focus();
});
于 2017-08-02T02:53:25.683 に答える