简体   繁体   中英

How to make this error msg not print twice? (how to make ng-keypress not trigger ng-blur)

Problem: The error message generated by symc_invalid_pin_name (having invalid character such as /, >, and so on) is printed twice.

My investigation: Since the error message will only be printed once when the textbox loses focus by just clicking mouse somewhere else, but printed twice when I hit enter when focusing on the textbox, I assume it's because ng-keypress triggers ng-blur. When I was looking for solution I saw this . But I don't think the answer helped much since the first answer just provided the concept but not the solution, the second answer was using jQuery instead of AngularJS (I might be wrong because I am new to web developement). Also I want to make sure what is causing the problem is the ng-blur being triggered by ng-keypress.

HTML:

<td id="symbol-pin-name" class="listings-pin-name" ng-click="selectPin(pin)" ng-dblclick="editPinName($event, pin)" ng-class="getUserDefinedNameClass(pin)">
    <div>
      <span ng-click="editPinName($event, pin)"><svg class="icon icon-pencil"><use xlink:href="#icon-pencil"></use></svg></span>
      <span ng-bind="pin.name" ng-show="changedPin.id != pin.id">A26</span>
      <input maxlength="40" type="text" id="edit-pin-name-text-{{pin.id}}" ng-model="editedPinNames[pin.id]" ng-show="changedPin.id == pin.id" ng-blur="pinNameEditBlur($event, pin)" ng-keydown="pinNameChanged($event, pin)" ng-cloak>
    </div>
  </td>

CoffeeScript:

$scope.pinNameChanged = (e, p) ->
id = p.id
switch e.keyCode
  when 13
    illegalChars = new RegExp("[$\'\"\\\\<>`\\s]")
    pinToBeChanged = pin for pin in $rootScope.pins when pin.id is id
    if illegalChars.test($scope.editedPinNames[id].trim())
      $rootScope.$emit("GenericError", i18n.symc_invalid_pin_name)
      $scope.changedPin.id = ""
    else
      if $scope.editedPinNames[id].trim() is ""
        matchedPin = $rootScope.masterTerminals.filter ((t) -> t.jedecName is p.jedecName)[0]
        if matchedPin?
          $scope.editedPinNames[id] = if matchedPin.label? then matchedPin.label else ""
        else
          $scope.editedPinNames[id] = ""
      else
        $scope.editedPinNames[id] = $scope.editedPinNames[id].trim()
      $rootScope.$emit('PinPropertyUpdate', [id], name: $scope.editedPinNames[id])
      $rootScope.updateStandardSvg()
      $rootScope.$emit('Redraw')
      $scope.changedPin.id = ""
  when 27
    cancelPinNameEdit()

$scope.pinNameEditBlur = (e, p) -> $scope.pinNameChanged({keyCode: 13}, p)

I am using AngularJS.

you can add

ng-blur="$event.preventDefault()"

or even for yours pinNameChanged($event, pin) add

$event.preventDefault() or $event.stopPropagation()

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM