Question

在进行表单的键盘导航（使用TAB键）时，单选按钮仅被聚焦，但未被选中。如需选择我将使用ARROW键。我想要当单选按钮被聚焦时，也应该选择它。之后，用户可以使用箭头键来更改选择。

<ext:RadioGroup 
    runat="server"
    DataIndex="gender" 
    ColumnsNumber="1">
    <Items>
        <ext:Radio runat="server" BoxLabel="Male" InputValue="true" />
        <ext:Radio runat="server" BoxLabel="Female" InputValue="false" />
    </Items>
</ext:RadioGroup>

我该怎么做？

Answer 1

如果您希望此流程正确显示，则必须响应3个事件。您还需要一种方法让用户进行持久的选择使用Javascript：

<script type="text/javascript">
    (function () {
        var util = function () { }
        var USER_SELECTED = undefined;

        // respond to the radiobutton being focused
        util.onFocus = function (grp, key) {
            // skip along until the user presses enter on the item they are focused on...
            if (USER_SELECTED == undefined) {
                grp.setValue(true);
            }
        }

        // respond to the loss of focus - prevent the last item in the list from keeping the 'checked'
        // value if the list is no longer under focus
        util.lostFocus = function (grp, key) {
            if (USER_SELECTED != grp)
                grp.setValue(false);
        }

        // if the user presses ENTER ... make the item in the list under static focus ... 
        // subsequent ENTERS can make static focus go to the new radio box 
        util.onEnter = function (grp, key, code) {
            if (key.type = 'pressDown' && key.keyCode == 13){
                USER_SELECTED = grp;
                grp.setValue(true);
                grp.boxLabelEl.highlight();
            }
        }

        if (!window.util) {
            window.util = util;
        }

    }(window));


</script>

标记：

 <ext:Panel ID="Panel1" runat="server" Height="300" Title="Title" Layout="FormLayout" >

    <Items>
        <ext:RadioGroup ID="RadioGroup1" runat="server" ColumnsNumber="1">
            <Items>
                <ext:Radio runat="server" BoxLabel="Male" InputValue="1" TabIndex="1">
                    <Listeners>
                        <SpecialKey Fn="util.onEnter" />
                        <Focus Fn="util.onFocus" />
                        <Blur Fn="util.lostFocus" />
                    </Listeners>
                    </ext:Radio>
                <ext:Radio runat="server" BoxLabel="Female" InputValue="0" TabIndex="2">
                    <Listeners>
                         <SpecialKey Fn="util.onEnter" />
                        <Focus Fn="util.onFocus" />
                        <Blur Fn="util.lostFocus" />
                    </Listeners>
            </ext:Radio>
                <ext:Radio runat="server" BoxLabel="Transgender" InputValue="2" TabIndex="3">
                    <Listeners>
                         <SpecialKey Fn="util.onEnter" />
                        <Focus Fn="util.onFocus" />
                        <Blur Fn="util.lostFocus" />
                    </Listeners>
            </ext:Radio>
                <ext:Radio runat="server" BoxLabel="Other" InputValue="3" TabIndex="4">
                    <Listeners>
                         <SpecialKey Fn="util.onEnter" />
                        <Focus Fn="util.onFocus" />
                        <Blur Fn="util.lostFocus" />
                    </Listeners>
            </ext:Radio>
            </Items>
        </ext:RadioGroup>

    </Items>
 </ext:Panel>

查看：

ext.net单选按钮选中属性

1 个答案: