如何在只读字段上禁止焦点答案

【问题标题】：How to disallow focus at a readOnly field如何在只读字段上禁止焦点
【发布时间】：2012-07-31 08:09:50
【问题描述】：

我们有一个表单，其中有几个字段标记为只读。

问题是用户能够使用鼠标或键盘选项卡聚焦或导航到这些只读字段，我们希望禁止这样做。

不允许这样做的一种方法是将所有此类字段标记为“已禁用”。但是当标记为禁用时，虽然字段无法聚焦，但这些禁用的字段也不会提交到服务器，这不是预期的。

因此，我们如何防止在只读字段上出现焦点？

PS：不允许在只读字段上获得焦点的原因是为了通过键盘提供更好的导航，以便通过使用 Tab 键，用户只能导航或跳转到他可以编辑的那些字段，而所有只读字段都会被忽略。

【问题讨论】：

会设置你想要关注帮助的字段的tabIndex
@gunnx：感谢 Gunnx，实际上设置 tabindex 使事情变得具体和上下文相关，不幸的是，我们有大约 300 个表单，并试图为这个问题提供更通用的解决方案。对此有什么想法吗？
请停止在您的标题中添加标签。无需在标题前加上 ExtJS: 或 ExtJs 4.1: - 这就是标签的用途。
@meagar：在标题/正文中添加技术有助于提高内容的可读性。我浏览了这篇文章 - meta.stackexchange.com/questions/70498/… - 但我也觉得如果我在标题/正文中添加技术，那么它会变得更具可读性。
@netamp 这就是标签的用途。复制标题中的标签意味着您的可用标题空间更少。

标签： forms extjs field readonly

【解决方案1】：

您可以向基 Field 类添加一个侦听器来侦听焦点事件，然后如果该字段是只读的以关注下一个组件。

listeners: {
    focus: function(field)
    {                       
        if (field.readOnly)
        {
            field.nextSibling().focus();
        }
    }
}

【讨论】：

true，我们只是在尝试这样做，但不幸的是，如果下一个兄弟不存在，这将停止工作，也就是说，如果该字段当前是屏幕中的最后一个并且旁边有按钮它。在这种情况下，焦点仅在该字段处移除，并且不会离开该字段。我们也尝试了 nextNode() 但这也给出了相同的结果。还有什么想法吗？感谢您到目前为止的时间。
您可以分配 field.nextSibling() 的结果并测试是否为空。 var nextField = field.nextSibling();
是的..我们已经使用了它并且通过这个测试我们能够确定下一个字段是否存在并调用函数来相应地聚焦它，但主要问题是如果我们有一个没有任何同级的禁用字段，然后焦点会转到该字段之后存在的按钮，但是在这里，在这种情况下，焦点停留在同一字段上而不是转到按钮。
这些按钮是否在同一个容器中？如果不是，那么我认为 nextSibling 不会像你一样工作。如果它们不在同一个容器中，是否可以将它们移入其中？
同意.. 但问题是表格的数量大约为 300，并且根据具体需要都有不同的样式。因此，正在寻求一种通用的解决方案，其中 readOnly 在焦点管理的情况下与禁用的行为方式相同。

【解决方案2】：

只需覆盖 getSubmitData 方法并分配一些其他属性，让被覆盖的方法知道您要提交，而不管（例如 forceSubmit）：

Ext.define('My.form.Field', {
    override: 'Ext.form.field.Field',

    getSubmitData: function() {
        var me   = this,
            data = null;

        if ( me.disabled && me.readOnly && me.forceSubmit ) {
            data = {};
            data[me.getName()] = '' + me.getValue();
        }
        else {
            return me.callParent();
        }

        return data;
    }
});

然后你可以在你的代码中要求这个类，并设置你需要禁用、只读和强制提交的字段：

my field = new Ext.form.field.Text({
    disabled:    true,
    readOnly:    true,
    forceSubmit: true,

    value: 'foo'
});

这应该可以解决问题。

【讨论】：