Skip to main content
improved
Source Link
Jesus Carrasco
  • 1.4k
  • 1
  • 11
  • 16

Try change ng-keypress to ng-keydown or ng-keyupng-keydown and in the function do this:

HTML

<input type="radio" class="appear-disabled" ng-keydown="suppressKeyboard($event)" name="contestedDataYes" ng-model= REDACTED.contestedData ng-value="'Y'" ng-checked="REDACTED.contestedData === 'Y'" aria-label="Yes">&nbsp;Yes&nbsp;
<input type="radio" class="appear-disabled" ng-keydown="suppressKeyboard($event)" name="contestedDataNo" ng-model= REDACTED.contestedData ng-value="'N'" ng-checked="REDACTED.contestedData === 'N'" aria-label="No">&nbsp;No&nbsp;

CONTROLLER

$scope.suppressKeyboard = function(event) {
    var keyCode = event.keyCode;
    // 32 = space, 13 = enter

    if (keyCode == 13 || keyCode == 32) {
       //event.preventDefault ? event.preventDefault() : (event.returnValue = 
       false);
      event.preventDefault();
     }
 };
  • keydown -> can be prevented -> fired when: press a key
  • keypress -> can be prevented -> fired when: hold a key
  • keyup -> can not be prevented -> fired when: release a key

Try change ng-keypress to ng-keydown or ng-keyup and in the function do this:

HTML

<input type="radio" class="appear-disabled" ng-keydown="suppressKeyboard($event)" name="contestedDataYes" ng-model= REDACTED.contestedData ng-value="'Y'" ng-checked="REDACTED.contestedData === 'Y'" aria-label="Yes">&nbsp;Yes&nbsp;
<input type="radio" class="appear-disabled" ng-keydown="suppressKeyboard($event)" name="contestedDataNo" ng-model= REDACTED.contestedData ng-value="'N'" ng-checked="REDACTED.contestedData === 'N'" aria-label="No">&nbsp;No&nbsp;

CONTROLLER

$scope.suppressKeyboard = function(event) {
    var keyCode = event.keyCode;
    // 32 = space, 13 = enter

    if (keyCode == 13 || keyCode == 32) {
       //event.preventDefault ? event.preventDefault() : (event.returnValue = 
       false);
      event.preventDefault();
     }
 };

Try change ng-keypress to ng-keydown and in the function do this:

HTML

<input type="radio" class="appear-disabled" ng-keydown="suppressKeyboard($event)" name="contestedDataYes" ng-model= REDACTED.contestedData ng-value="'Y'" ng-checked="REDACTED.contestedData === 'Y'" aria-label="Yes">&nbsp;Yes&nbsp;
<input type="radio" class="appear-disabled" ng-keydown="suppressKeyboard($event)" name="contestedDataNo" ng-model= REDACTED.contestedData ng-value="'N'" ng-checked="REDACTED.contestedData === 'N'" aria-label="No">&nbsp;No&nbsp;

CONTROLLER

$scope.suppressKeyboard = function(event) {
    var keyCode = event.keyCode;
    // 32 = space, 13 = enter

    if (keyCode == 13 || keyCode == 32) {
       //event.preventDefault ? event.preventDefault() : (event.returnValue = 
       false);
      event.preventDefault();
     }
 };
  • keydown -> can be prevented -> fired when: press a key
  • keypress -> can be prevented -> fired when: hold a key
  • keyup -> can not be prevented -> fired when: release a key
Source Link
Jesus Carrasco
  • 1.4k
  • 1
  • 11
  • 16

Try change ng-keypress to ng-keydown or ng-keyup and in the function do this:

HTML

<input type="radio" class="appear-disabled" ng-keydown="suppressKeyboard($event)" name="contestedDataYes" ng-model= REDACTED.contestedData ng-value="'Y'" ng-checked="REDACTED.contestedData === 'Y'" aria-label="Yes">&nbsp;Yes&nbsp;
<input type="radio" class="appear-disabled" ng-keydown="suppressKeyboard($event)" name="contestedDataNo" ng-model= REDACTED.contestedData ng-value="'N'" ng-checked="REDACTED.contestedData === 'N'" aria-label="No">&nbsp;No&nbsp;

CONTROLLER

$scope.suppressKeyboard = function(event) {
    var keyCode = event.keyCode;
    // 32 = space, 13 = enter

    if (keyCode == 13 || keyCode == 32) {
       //event.preventDefault ? event.preventDefault() : (event.returnValue = 
       false);
      event.preventDefault();
     }
 };