2

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

我发现了2个问题。

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

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

而第二个。

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

如果我在搜索框中设置 type="search" - 键盘上没有搜索按钮。所以我把我的搜索按钮放到 .

所以搜索按钮出现在虚拟键盘上。

但是在按下这个按钮后，表单提交并且我的页面重新加载。

我只需要调用一个函数。

4

1 回答 1

2

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

1）关于按下搜索按钮的事件（回车）

IOS Safari 中出现虚拟键盘上出现“搜索按钮”的问题。

type="search" 的文本输入必须在表单标签内。 在 iPhone/iPad Safari 键盘中显示“搜索”按钮 （第二个答案）

要在按下搜索按钮时调用某些函数而不提交表单，我将以下 javascript 放入 from 标记中：

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

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

2)

搜索框清除按钮的第二个问题。

这是dojo的错误。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。（）清除按钮的位置）

并清除搜索框。

而已！

于 2013-07-24T16:30:56.927 回答