javascript - 简单的 jQuery 工具提示(在 iPad 上位置扭曲)

Question

我在网页的表单字段上使用了简单的 jQuery UI 工具提示(即响应式)，它在每个浏览器的桌面上都能完美运行，但在 iPad 上，当我在键盘向上滑动时点击表单字段时，它会变形.我网页的标题部分也固定在滚动条上。我在自定义 jQuery 工具提示中使用了以下代码。

$(function () {
    $('.form-control').tooltip({
      disabled: true,
      position: {
      my: "left top",
      at: "left top-50",
      using: function( position, feedback ) {
        $( this ).css( position );
        $( "<div>" )
        .addClass( "arrow" )
        .addClass( feedback.vertical )
        .addClass( feedback.horizontal )
        .appendTo( this );
      }
      }
    }).on("focusin", function () {

        $(this)
            .tooltip("enable")
            .tooltip("open");

    }).on("focusout", function () {
        $(this)
            .tooltip("close")
            .tooltip("disable");
    });

});

我编写了这段代码，通过在文档大小发生变化时手动调用其 focusin 触发器来重新初始化聚焦字段的工具提示。它在桌面浏览器上按预期工作，但在 iPad 上，工具提示再次在同一位置重新初始化，即不正确。

var toolTipEl;
$('#inputSuccess, #inputWarning').tooltip({
  open: function (event, ui) {
   toolTipEl = event.target;
}
});
function checkDocumentHeight(callback){
var lastHeight = document.body.clientHeight, newHeight, timer;
(function run(){
  newHeight = document.body.clientHeight;

  if( lastHeight != newHeight )
    callback();
  lastHeight = newHeight;
  timer = setTimeout(run, 100);
})();
}
function doSomthing(){
  console.log('document resized');


setTimeout(function() {
if ($(toolTipEl).is(':focus')) {
  $(toolTipEl).trigger('focusout').trigger('focusin');
    }
 }, 500);
}
checkDocumentHeight(doSomthing);

请帮我找出解决办法。

Answer 1

在任何导致文档内容(实际上是高度)变化影响您的 Tooltip 位置的事件完成后，您需要重新初始化事件的 Tooltip。

首先通过在工具提示初始化中添加以下代码来监听工具提示处于事件状态的元素(保持现有代码不变。只需添加这些附加语句)。

var toolTipEl = undefined;

$(function () {

    $('.form-control').tooltip({

      open: function (event, ui) {
        toolTipEl = event.target;
      }

    }).on("focusin", function () {

         toolTipEl = undefined;

    }).on("focusout", function () {

        toolTipEl = undefined;

    }).on("mouseleave", function () {

        toolTipEl = undefined;

    });

});

请注意，因为您也在 focusin 事件上显示工具提示。因此，如果您不想在焦点已更改/离开时弹出工具提示，则还需要释放该变量。

然后创建一个函数来重置工具提示，如下所示。

function resetTooltip() {
  if (toolTipEl) {
    $(toolTipEl).trigger('focusout').trigger('focusin');
  };
}

在任何导致文档高度变化的事件中调用此函数。例如，如果内容来自 ajax 请求。您可以通过列出 gloab ajax 事件来调用 restTooltip 函数。请参见下面的示例。

$( document ).ajaxComplete(function() {
  resetTooltip();
});

希望对您有所帮助。问我是否需要进一步说明。