Question

我的页面上有多个FilteringSlect，除了第一个，其余都被禁用。在第一次选择值时，第二次滤波选择被启用，依此类推。我能够做到这一点。当用户在第一个过滤选择中选择值然后按Tab键转到下一个fitleringselect时，它会启用，但用户必须在2nd fitleringselect上单击鼠标才能输入值。我有一个jsfiddle链接

`http://jsfiddle.net/qpue91L9/75/`

证明了这个问题。我想要的是，只要第一次过滤选择的用户标签，下一个应该启用并且没有额外的点击，用户应该能够通过在fitleringselect文本框内键入来选择新值。

Answer 1

我想我的工作[工作小提琴] [1]

 [1]: http://jsfiddle.net/qpue91L9/125/

同样建议，提供完整的工作代码

HTML代码

<input id="stateSelect">
<input id="stateSelect1">
<input id="stateSelect2">

JS代码

require([
        "dojo/store/Memory", "dojo/on","dijit/form/FilteringSelect", "dojo/domReady!",'dijit/registry',"dijit/focus","dojo/dom"
    ], function(Memory, on,FilteringSelect,ready,registry,focusUtil,dom){
        var stateStore = new Memory({
            data: [
                {name:"Alabama", id:"AL", timeStamp:"1211753600"},
                {name:"Alaska", id:"AK", timeStamp:"1211753601"},
                {name:"American Samoa", id:"AS", timeStamp:"1211753602"},
                {name:"Arizona", id:"AZ", timeStamp:"1211753603"},
                {name:"Arkansas", id:"AR", timeStamp:"1211753604"},
                {name:"Armed Forces Europe", id:"AE", timeStamp:"1211753605"},
                {name:"Armed Forces Pacific", id:"AP", timeStamp:"1211753606"},
                {name:"Armed Forces the Americas", id:"AA", timeStamp:"1211753607"},
                {name:"California", id:"CA", timeStamp:"1211753608"},
                {name:"Colorado", id:"CO", timeStamp:"1211753609"},
                {name:"Connecticut", id:"CT", timeStamp:"1211753610"},
                {name:"Delaware", id:"DE", timeStamp:"1211753611"}
            ], idProperty: "timeStamp"
        });

        var filteringSelect = new FilteringSelect({
            id: "stateSelect",
            store: stateStore,
             tabIndex: 1,
            searchAttr: "name",
            identifier: "timeStamp",

        }, "stateSelect").startup();
        var filteringSelect1 = new FilteringSelect({
            id: "stateSelect1",
            name: "state",
             tabIndex: 2,
            store: stateStore,
            searchAttr: "name",
            identifier: "timeStamp" ,
            disabled:true,
        }, "stateSelect1").startup();
        var filteringSelect2 = new FilteringSelect({
            id: "stateSelect2",
            name: "state",
             tabIndex: 3,
            store: stateStore,
            searchAttr: "name",
            identifier: "timeStamp",
            disabled:true,        
        }, "stateSelect2").startup();

        on(dijit.byId("stateSelect"),"KeyPress",function(evt){
        dijit.byId("stateSelect1").set("disabled",false);

        });
         on(dijit.byId("stateSelect"),"change",function(evt){
        dijit.byId("stateSelect1").set("disabled",false);
         dijit.byId("stateSelect1").focus();

        });
        on(dijit.byId("stateSelect1"),"KeyPress",function(evt){
        dijit.byId("stateSelect2").set("disabled",false);

        });
         on(dijit.byId("stateSelect1"),"change",function(evt){
        dijit.byId("stateSelect2").set("disabled",false);
         dijit.byId("stateSelect2").focus();

        });


    });

Answer 2

我检查了你的例子并让它有点工作......

Update Example

基本上，我补充说：

require([ "dijit/focus", "dojo/dom", "dojo/domReady!" ], function(focusUtil, dom){
    var domObj = dom.byId("stateSelect1");
    focusUtil.focus(domObj);
});

并为每个选择对象添加了tabIndex属性。问题是它只有在您通过单击从列表中实际选择项目时才有效。如果使用tab，那么它不起作用。您可以使用此示例并捕获tab事件，使其按您希望的方式工作。

dijit过滤选择焦点

2 个答案: