2

Worklight プロジェクトで dojox.mobile.SearchBox を使用しています。

2つの問題が見つかりました。

1 つ目は、クリア ボタン (検索ボックス内のテキストをクリアする必要がある、円で囲まれた小さな十字) が IOS Safari (またはサファリを使用する作業アプリ) で機能しないことです。

唯一起こることは、カーソルが検索ボックス内のテキストの右側に移動することです。それでおしまい。テキストは削除されません。

そして2つ目。

仮想キーボードの検索ボタンを押して関数を呼び出す必要があります。

検索ボックスに type="search" を設定すると、キーボードに検索ボタンがありません。だから私は自分の検索ボタンを .

そのため、仮想キーボードに検索ボタンが表示されます。

しかし、このボタンを押すと、フォームが送信され、ページがリロードされます。

そして、関数を呼び出すだけです。

4

1 に答える 1

2

両方の問題を解決しました))

1) 検索ボタン(入力)押下時のイベントについて

IOS Safari では、仮想キーボードに「検索ボタン」が表示されるという問題があります。

type="search" を使用したテキスト入力はフォームタグ内にある必要があります。 iPhone/iPad Safari キーボードに「検索」ボタンを表示する (2 番目の回答)

検索ボタンを押してフォームを送信せずに関数を呼び出すには、次の JavaScript を from タグに入れます。

<form onsubmit="myFunction(...);return false;">

検索ボタンを押すと、送信アクションが開始されます。そして、この JavaScript はこの時点で私の関数を呼び出し、送信を停止します。それだけが必要！

2)

検索ボックスのクリアボタンの2番目の問題。

これは道場のバグです。https://bugs.dojotoolkit.org/ticket/16672

回避策を見つけました。http://dojo-toolkit.33424.n3.nabble.com/dojox-mobile-SearchBox-Clear-Button-x-fails-in-iPad-iOS-16672-td3995707.html

しかし、私の場合はうまくいかないので、少し変更します。

これは私の変種です：

<form onsubmit="myFunction(...);return false;">
            <input id="searchBox" ontouchstart="clearButtonSupport(event);" data-dojo-type="dojox.mobile.SearchBox"
                data-dojo-props="type:'search'" type="search"
                placeholder="Some placeholder...">
        </form>

これは clearButtonSupport 関数です。

function clearButtonSupport(evt) {
require([ "dijit/registry", "dojox/mobile/SearchBox" ], function(registry) {
    var searchBox = registry.byId('searchBox');

        var rect = document.getElementById('searchBox').getBoundingClientRect();
        // if touched in the right-most 20 pels of the search box
        if (rect.right - evt.touches[0].clientX < 20) {
            evt.preventDefault();
            searchBox.set("value", "");
        }

});

}

IOS サファリの onclick および onmouseup イベントは、テキスト入力がフォーカスされていない場合にのみ機能します。検索ボックス (カーソルが内側) にフォーカスがある場合、このイベントはスローされません。

だから私はontouchstartイベントを使用しました

ontouchstart - IOS サファリのマルチタッチ イベント。

要素に触れるたびにスローされます。

だから私は最初の（そして唯一の）タッチの座標を取ります。そして、要素の右側から20px未満離れているかどうかを見てください.()クリアボタンの位置)

検索ボックスをクリアします。

それでおしまい！

于 2013-07-24T16:30:56.927 に答える