2017年5月15日 星期一

enter 模擬 tab 行為

.directive("entertab", function () {
    return {
        link: function (scope, element, attrs, ngModel) {
            element.on('keydown', function (event) {
                var key = event.which || event.keyCode;
                if (key == 13) {
                    var parent = $(element).parent()[0].localName == "div" ? $(element).parent():$(element).parent().parent(); // 依階層結構自行調整寫法
                    for (var i = 1; i <= 30; i++) { // 避開ng-hide,最多找30次,不然就放棄
                        parent = $(parent).next($(parent)[0].localName);
                        if (parent.length==0) break;
                        if ($(parent).attr("class") != "ng-hide") {
                            var nextchild = $(parent).find('input:not(.ng-hide,:disabled, [readonly="readonly"], [disabled="disabled"]),select:not(:disabled, [readonly="readonly"], [disabled="disabled"]),button:not(:disabled, [disabled="disabled"])');
                            if (nextchild.length > 0) {
                                $(nextchild).first().focus();
                                event.preventDefault();
                                break;
                            }
                        }
                    }
                }
            });
        }
    }
})

沒有留言:

input 連結 datalist 用程式控制彈出選項

範例: nextTick(() => document.querySelector('input').showPicker());  ※僅支援現代瀏覽器