Angular only update input field when not having focus

Question

I have an input field which is for both setting and readback. I would like to have the following behavior:

No focus: update the field with readback
Focus: no update, if enter is pressed call send with the value written in the field.

I have a mwe which is a start but does update when focused.

<!DOCTYPE html>
<html lang="en">
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.5/angular.js"></script>
<script>
    angular.module('App', []).controller('world', function ($scope) {
		$scope.value1 = 0;
		$scope.value2 = 0;
        $scope.send = function(value) {
            alert(value);
        }

        let readback = function() {
			$scope.value1 += 1;
			$scope.value2 += 1;
			$scope.$apply();
			setTimeout(readback, 100);
        };
        setTimeout(readback, 1);
    });
</script>
</head>

<body ng-app="App" ng-controller="world">
<input type="text" ng-model="value1" ng-keyup="$event.keyCode == 13 && send(value1)" />
<input type="text" ng-model="value2" ng-keyup="$event.keyCode == 13 && send(value2)" />
</body>

Edit: Sorry I was a bit unclear and cut down my mwe too much. I have about ten such input fields. The unfocused fields should still update while only the one which is selected does not.

Aprillion · Accepted Answer · 2018-06-22 20:46:54Z

1

you can detect ng-focus and ng-blur, using separate controller instances for each input:

<!DOCTYPE html>
<html lang="en">
<head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.5/angular.js">
    </script>
    <script>
        angular.module('App', []).controller('world', function ($scope) {
            let isFocus = false;
            
            $scope.value = 0;
            $scope.send = () => alert($scope.value);
            $scope.focus = () => isFocus = true;
            $scope.blur = () => isFocus = false;
            
            let readback = function() {
                if (!isFocus) {
                  $scope.value += 1;
                  $scope.$apply();
                }
                setTimeout(readback, 100);
            };
            setTimeout(readback, 1);
        });
    </script>
</head>

<body ng-app="App">
    <input type="text"
           ng-controller="world"
           ng-model="value"
           ng-keyup="$event.keyCode == 13 && send()"
           ng-focus="focus()"
           ng-blur="blur()" />
    <input type="text"
           ng-controller="world"
           ng-model="value"
           ng-keyup="$event.keyCode == 13 && send()"
           ng-focus="focus()"
           ng-blur="blur()" />
</body>

edited Jun 22, 2018 at 20:46

answered Jun 22, 2018 at 19:19

Aprillion

22.4k6 gold badges59 silver badges94 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

magu_ Over a year ago

Sorry I was a bit unclear and cut down my mwe too much. I have about ten such input fields. The unfocused fields should still update while only the one which is selected does not.

Aprillion Over a year ago

updated to use separate controller instance for each input

magu_ Over a year ago

That will be difficult as all the data comes in one structure and the fields are created with a ng-repeat. The solution I could see would be to make a isFocused for each individual field. I'll accept your answer later tonight if nothing more elegant shows up. Meanwhile have my +1.

Collectives™ on Stack Overflow

Angular only update input field when not having focus

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related