使用angularjs禁用數字輸入的箭頭鍵

我想通過angularjs指令（或以其他方式）禁用數字輸入的上下鍵。
注意：我不想將輸入類型更改爲文本，因爲我被要求不要。我也已經刪除了spinners。我是新來的角，所以不太瞭解它。我搜索了所有我能找到的鏈接，但他們主要是關於隱藏spinners而不是關閉禁用箭頭鍵。我從其他鏈接中獲得了這段代碼。這將禁用相同的鼠標滾輪。如果可以做一些改變，那會很好。使用angularjs禁用數字輸入的箭頭鍵

module.directive('input',function() { 
return { 
    restrict: 'E', 
    scope: { 
     type: '@' 
    }, 
    link : function (scope, $element) { 
     if (scope.type == 'number') { 
      $element.on('focus', function() { 
       angular.element(this).on('keyup', function (e) { 
        e.preventDefault(); 
       }); 
      }); 
      $element.on('blur', function() { 

       angular.element(this).off('keyup'); 
      }); 
     } 
    } 
} 
});

來源

2014-11-02 nikgpuec

請將您的問題後的身體。請同時發佈您已經嘗試和/或學習過的內容。 – Kolban 2014-11-02 04:32:36

然後我應該在問題標題中提及什麼？ – nikgpuec 2014-11-02 04:41:07

也許「使用angularjs禁用數字輸入的向上和向下鍵」。在問題的主體中，您可以根據需要進行描述性描述，將信息傳遞給潛在的響應者。 – Kolban 2014-11-02 04:43:15

如果你想關閉全局上/下箭頭鍵的所有輸入[數字]元素：

$(document).bind('keydown', function(event) { 
    var target = event.srcElement || event.target; 
    var tag = target.tagName.toUpperCase(); 
    var type = target.type.toUpperCase(); 
    if (tag === 'INPUT' && type === 'NUMBER' && 
    (event.keyCode === 38 || event.keyCode === 40)) { 
    event.preventDefault(); 
    } 
});

或者你可以把它綁定到一個指令一個元素：

.directive('disableArrows', function() { 

    function disableArrows(event) { 
    if (event.keyCode === 38 || event.keyCode === 40) { 
     event.preventDefault(); 
    } 
    } 

    return { 
    link: function(scope, element, attrs) { 
     element.on('keydown', disableArrows); 
    } 
    }; 
});

模板：

<input type="number" disable-arrows />

來源

2014-11-02 08:16:00

非常感謝。這在全球運作。但我想限制它只有一些輸入。可以這樣做嗎？ – nikgpuec 2014-11-02 14:11:12

@nikgpuec我更新了我的答案 – 2014-11-02 17:32:14

謝謝。有用。 – nikgpuec 2014-11-03 00:50:00

您可以將指令更改爲：

module.directive('input',function() { 
return { 
    restrict: 'E', 
    scope: { 
     type: '@' 
    }, 
    link : function (scope, $element) { 
     if (scope.type == 'number') { 
      $element.on('focus', function() { 
       angular.element(this).on('keyup', function (e) { 
        if (event.keyCode === 38 || event.keyCode === 40) { 
         e.preventDefault(); 
        } 
       }); 
      }); 
      $element.on('blur', function() { 

       angular.element(this).off('keyup'); 
      }); 
     } 
    } 
} 
});

來源

2014-11-02 08:19:49

使用angularjs禁用數字輸入的箭頭鍵

回答

相關問題