在智能电视的Web应用场景中，遥控器方向键是唯一可靠的连续操作手段。Tizen和WebOS虽然都支持现代浏览器内核，但在处理jQuery UI这类组件库时，默认的空间导航策略经常出现焦点无法移动、焦点跳跃或焦点被锁死的情况。很多初次调试电视端H5的开发者会误以为按键事件没有触发，实际上问题大多出在浏览器默认行为与jQuery UI焦点管理逻辑的冲突上。要想彻底解决，需要从事件模型、焦点图和DOM几何关系三个层面入手。

一、方向键默认行为与jQuery UI的冲突点

Tizen和WebOS的浏览器内核都内置了空间导航（Spatial Navigation）机制。当用户按下遥控器方向键时，浏览器会先尝试在可聚焦元素列表中寻找几何方向上最接近的候选元素，然后自动把焦点移动过去。这个过程原本是为了让没有鼠标的设备也能操作网页，但它并不知道jQuery UI部件可能已经修改了文档结构或使用了绝对定位、transform等样式。例如，jQuery UI的Dialog组件在打开时会把整个页面包进一个遮罩层中，同时将焦点强制移动到对话框内部，而浏览器的空间导航可能仍然按照旧的位置计算，导致按键后焦点来回跳动。

另一个常见冲突来自jQuery UI对tabindex的自动管理。jQuery UI会为某些元素动态添加或移除tabindex属性，当这些元素参与空间导航时，浏览器有可能选中隐藏的、不可见的或者已经被禁用元素。开发者需要先确认按键事件是否真的到达了窗口，并阻止浏览器默认的方向键行为，为自定义导航铺路。下面这段监听代码可以用于判断按键类型，避免默认滚动或焦点跳转。

document.addEventListener('keydown', function (e) {
    var key = e.key || e.keyCode;
    console.log('key=' + key + ' code=' + e.keyCode);
    if ([37, 38, 39, 40].indexOf(e.keyCode) > -1) {
        e.preventDefault();
    }
});

在Tizen和WebOS的不同版本中，方向键的键码并不完全一致。较新的Chromium内核会同时提供key属性（ArrowLeft、ArrowRight、ArrowUp、ArrowDown）和传统键码37、38、39、40；而某些旧版WebOS或Tizen系统可能只提供键码。焦点管理的代码必须同时兼容这两种形式，否则在部分设备上会出现方向键完全无响应的情况。另外，jQuery UI的Dialog、Autocomplete和Menu等组件内部都带有自己的焦点处理逻辑，它们对Tab键的循环限制做得较好，但对方向键的空间移动却没有完整支持，这也是需要外部统一接管的原因。

二、自定义四向焦点导航的实现步骤

核心思路是在一个指定的容器范围内收集所有可聚焦元素，并依据元素在屏幕上的矩形区域计算上下左右邻居。当用户按下方向键时，阻止浏览器默认行为，手动把焦点移动到计算出来的下一个元素上。jQuery UI提供了一个非常有用的:focusable选择器，可以过滤出真实可聚焦的元素，但还需要进一步排除不可见、禁用或尺寸为0的项。

function getFocusableElements(container) {
    return $(container).find(':focusable').filter(':visible').not(':disabled');
}

几何计算是自定义导航的关键。每个可聚焦元素都可以通过getBoundingClientRect()获得左、上、右、下和中心点坐标。对于左右方向，优先选择中心点水平方向上与当前元素最近、且垂直偏差不超过一定比例的元素；对于上下方向，同理优先比较垂直距离。下面的findNextFocused函数实现了一套基于距离评分的邻居查找算法，在实际电视应用中可以稳定工作。

function getCenterRect(el) {
    var rect = el.getBoundingClientRect();
    return {
        left: rect.left,
        top: rect.top,
        right: rect.right,
        bottom: rect.bottom,
        cx: rect.left + rect.width / 2,
        cy: rect.top + rect.height / 2
    };
}
function findNextFocused(current, direction, container) {
    var $list = getFocusableElements(container);
    var currentRect = getCenterRect(current);
    var best = null;
    var bestScore = Infinity;
    var i, cand, rect, dx, dy, score;
    for (i = 0; i < $list.length; i++) {
        cand = $list[i];
        if (cand === current) continue;
        rect = getCenterRect(cand);
        dx = rect.cx - currentRect.cx;
        dy = rect.cy - currentRect.cy;
        if (direction === 'left' && dx < 0 && Math.abs(dy) < Math.abs(dx)) {
            score = Math.abs(dx) + Math.abs(dy) * 2;
            if (score < bestScore) {
                bestScore = score;
                best = cand;
            }
        } else if (direction === 'right' && dx > 0 && Math.abs(dy) < Math.abs(dx)) {
            score = Math.abs(dx) + Math.abs(dy) * 2;
            if (score < bestScore) {
                bestScore = score;
                best = cand;
            }
        } else if (direction === 'up' && dy < 0 && Math.abs(dx) < Math.abs(dy)) {
            score = Math.abs(dy) + Math.abs(dx) * 2;
            if (score < bestScore) {
                bestScore = score;
                best = cand;
            }
        } else if (direction === 'down' && dy > 0 && Math.abs(dx) < Math.abs(dy)) {
            score = Math.abs(dy) + Math.abs(dx) * 2;
            if (score < bestScore) {
                bestScore = score;
                best = cand;
            }
        }
    }
    return best;
}

这个算法以当前元素的中心点为基准，只考虑严格位于目标方向一侧的候选元素，并且要求另一个轴上的偏差不能过大，以避免在密集网格中错误地跳到对侧或远处。评分公式中垂直偏差乘以2，可以在水平移动时优先保持同一行。事件绑定层还需要统一处理键码兼容，把不同设备上的方向键映射为统一的左、右、上、下指令。

三、弹窗焦点陷阱与滚动容器的兼容处理

jQuery UI Dialog打开后，默认会把焦点限制在对话框内部，这种行为在遥控器场景下可能造成导航死区。如果自定义导航仍然扫描整个页面，就会出现焦点移动到遮罩层之下的元素，但浏览器又把焦点拉回对话框，用户会看到边框闪烁或完全无反应。解决方法是把导航容器的引用切换为当前对话框，并在关闭对话框时恢复为外层容器。

var nav = {
    container: document.body,
    setContainer: function (el) {
        this.container = el;
    },
    handleKey: function (e) {
        var dir = null;
        var key = e.key || e.keyCode;
        if (key === 'ArrowLeft' || key === 37) dir = 'left';
        else if (key === 'ArrowRight' || key === 39) dir = 'right';
        else if (key === 'ArrowUp' || key === 38) dir = 'up';
        else if (key === 'ArrowDown' || key === 40) dir = 'down';
        if (!dir) return;
        var current = document.activeElement;
        var next = findNextFocused(current, dir, this.container);
        if (next) {
            next.focus();
            e.preventDefault();
        } else {
            e.preventDefault();
        }
    }
};
document.addEventListener('keydown', function (e) {
    nav.handleKey(e);
});

当容器内部没有合适的下一个元素时，阻止默认行为可以防止浏览器回退到空间导航并产生不可控的焦点跳跃。对于滚动容器，例如一个上下滚动的内容列表，电视遥控器的方向键默认可能既触发滚动又触发焦点移动，二者会互相干扰。正确做法是在移动焦点之前判断当前元素是否可滚动，如果可滚动且尚未到达边界，则先执行滚动，滚动到底后再移动到下一个元素。

function isScrollable(el, direction) {
    var overflowY = $(el).css('overflow-y');
    var overflowX = $(el).css('overflow-x');
    if (direction === 'up' || direction === 'down') {
        return el.scrollHeight > el.clientHeight && overflowY !== 'visible';
    } else {
        return el.scrollWidth > el.clientWidth && overflowX !== 'visible';
    }
}
function scrollInDirection(el, direction) {
    var step = 120;
    if (direction === 'down') {
        if (el.scrollTop + el.clientHeight < el.scrollHeight) {
            el.scrollTop += step;
            return true;
        }
    } else if (direction === 'up') {
        if (el.scrollTop > 0) {
            el.scrollTop -= step;
            return true;
        }
    } else if (direction === 'right') {
        if (el.scrollLeft + el.clientWidth < el.scrollWidth) {
            el.scrollLeft += step;
            return true;
        }
    } else if (direction === 'left') {
        if (el.scrollLeft > 0) {
            el.scrollLeft -= step;
            return true;
        }
    }
    return false;
}

在实际项目中，还需要给焦点元素设置清晰的视觉反馈。电视屏幕通常距离用户较远，默认的浏览器焦点轮廓往往不够明显。建议使用outline属性绘制高对比度边框，同时避免使用border，因为border会改变元素尺寸，导致布局偏移。下面是一段适用于电视应用的焦点样式。

.tv-focusable:focus {
    outline: 3px solid #ff6600;
    outline-offset: 2px;
    transition: outline-color 0.2s;
}

通过上述组合方案，可以让jQuery UI组件在Tizen和WebOS的智能电视上获得稳定、可预期的方向键导航体验。事件拦截、几何邻居计算、容器切换和滚动优先级处理四个环节缺一不可。调试时建议在真实设备上验证，因为模拟器往往无法完全还原遥控器键码和浏览器空间导航的交互细节。