Question

我在Worklight项目中使用dojox.mobile.SearchBox。

我发现了2个问题。

第一个是清除按钮（圆圈中的一个小十字，必须清除搜索框中的文本）在IOS Safari（或使用safari的workilght应用程序）中不起作用。

唯一发生的事情是光标移动到文本的右侧是在搜索框中。而已。它不会删除文本。

第二个。

我需要通过按虚拟键盘上的搜索按钮来调用功能。

如果我在搜索框中设置type =“search” - 键盘上没有搜索按钮。所以我将搜索按钮放入。

因此，搜索按钮会出现在虚拟键盘上。

但是在按下此按钮后，表单会提交并重新加载页面。

我只需要调用一个函数。

Answer 1

我已经解决了两个问题））

1）关于按搜索按钮（输入）的事件

IOS Safari中存在一个问题，即在虚拟键盘上显示“搜索按钮”。

使用type =“search”输入的文本必须位于表单标记内。 Show 'Search' button in iPhone/iPad Safari keyboard （第二个答案）

要按“搜索”按钮调用某些功能而不提交表单，我将以下javascript放入from标签：

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

按“搜索”按钮可启动“提交”操作。此javascript此时调用我的函数并停止提交。这就是我需要的！

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 safari中的

onclick和onmouseup事件仅在文本输入未聚焦时才起作用。如果焦点在搜索框（光标在里面），则不会抛出此事件。

所以我使用 ontouchstart 事件

ontouchstart - IOS safari中的多点触控事件。

每次触摸元素时都会抛出它。

所以我采取了第一次（也是唯一的）触摸的坐标。并查看它是否远离元素右侧的20px。（）清除按钮的位置）

清除搜索框。

就是这样！

dojox.mobile.SearchBox无法正常工作

1 个答案: