AngularJS not able to type in textbox

Question

At the moment I try to implement an app with AngularJS. At first my problem: I am not able to type text into a textbox.

I have a zoomService which increments and decrements the zoom property. The user is able to zoom with a slider, buttons and a textbox but unfortunatelly the part with the textbox doesn't work.

Here is my code:

"use strict";

app.service("zoomService", ["$rootScope", function ($rootScope) {

    var data = {
        zoom: 100,
        upperBound: 200, // TODO: Aus Konfigurationsdatei lesen
        lowerBound: 20 // TODO: Aus Konfigurationsdatei lesen
    };

    return {
        data: data,

        increment: function() {
            if ($rootScope.$root.$$phase != "$apply" && $rootScope.$root.$$phase != "$digest") {
                $rootScope.$apply(function() {
                    if (data.zoom + 1 <= data.upperBound)
                        data.zoom++;
                });
            } else {
                if (data.zoom + 1 <= data.upperBound)
                    data.zoom++;
            }
        },

        decrement: function() {
            if ($rootScope.$root.$$phase != "$apply" && $rootScope.$root.$$phase != "$digest") {
                $rootScope.$apply(function () {
                    if (data.zoom - 1 >= data.lowerBound)
                        data.zoom--;
                });
            } else {
                if (data.zoom - 1 >= lowerBound)
                    data.zoom--;
            }
        },

        reset: function() {
            if ($rootScope.$root.$$phase != "$apply" && $rootScope.$root.$$phase != "$digest") {
                $rootScope.$apply(function () {
                    data.zoom = 100;
                });
            } else {
                data.zoom = 100;
            }
        }
    }
}]);

app.controller("StartController", ["$scope", "zoomService", function($scope, zoomService) {

    $scope.zoom = zoomService;

}]);

<div data-ng-show="project.data.project !== null" class="zoom top-right">
    <div>
        <form name="zoomForm" data-ng-init="setFormScope(this)">
            <img src="/styles/images/16x16/FI_Verkleinern.png" data-ng-click="zoom.decrement()" alt="Zoom -" title="Zoom -" />
            <input class="slider" type="range" min="{{zoom.data.lowerBound}}" max="{{zoom.data.upperBound}}" data-ng-model="zoom.data.zoom" />
            <img src="/styles/images/16x16/FI_Vergroessern.png" data-ng-click="zoom.increment()" alt="Zoom +" title="Zoom +"/>
            <input name="directZoom" type="text" data-ng-minlength="2" data-ng-maxlength="3" data-ng-pattern="/^[0-9]{2,3}$/" data-ng-model="zoom.data.zoom" data-ng-model-options="{updateOn: 'blur'}" data-ng-keyup="cancel($event)" />
        </form>
    </div>
</div>

I am happy about every small hint which I could solve this problem. Thanks in advance!

you have a error - used lowerBound in decrement instead data.lowerBound and also seems like in your case better factory instead service — Grundy
– Grundy, Commented Jun 15, 2015 at 9:36
plnkr.co/edit/nkBH5Q0c31UIwNGJivPA?p=preview Now I have created a plunkr and there it works but on my system it doesn't. I am really confused! My hole app is much bigger then this snippet maybe there are some other side effects? How could I detect such ugly side effects? — Patrick Vogt
– Patrick Vogt, Commented Jun 15, 2015 at 9:52

AJ Richardson · Accepted Answer · 2017-09-13 20:18:01Z

7

There could be a parent element (md-select in my case) that is eating your key down events. To fix this, try adding onkeydown="event.stopPropagation()" to the input tag. This will prevent the event from reaching the parent element, so it can't call preventDefault() anymore.

Example:

<input type="text" ng-model="zoom.data.zoom" ... onkeydown="event.stopPropagation()" />

If that doesn't work, try looking for any other code that might be calling preventDefault() and eating your keydown events.

It's also possible that you have some logic that is reverting the model value back to its original value as soon as you type. Check for any ng-change or $watch events that might be doing this. Although this is probably not the issue if you use {updateOn: 'blur'}.

answered Sep 13, 2017 at 20:18

AJ Richardson

6,8471 gold badge52 silver badges62 bronze badges

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

1 Comment

Strider Over a year ago

Calling preventDefault() from a parent element was the main culprit in my case. Your suggestion is right to the point: using stopPropagation() in the keyDown event handler did the trick!

Tomek Sułkowski · Accepted Answer · 2015-06-15 09:40:42Z

0

When you have

ng-model-options={updateOn: 'blur'}

set, the value will be updated only after user leaver the input field. If you remove this code, the update is instantaneous. Here's the reproduced example http://jsbin.com/nogegutize/edit?html,js,output

answered Jun 15, 2015 at 9:40

Tomek Sułkowski

7,2312 gold badges20 silver badges15 bronze badges

4 Comments

Ammar Over a year ago

Consider pasting the code in answer instead of providing link(s); which could go dead.

Patrick Vogt Over a year ago

It is ok but I need this ng-model-option!

Tomek Sułkowski Over a year ago

@PatrickVogt but this option says "update the value when user leaves the input" and it is precisely what happens. You want to update the value on keyup instead of telling it to only update it on blur? ;)

Patrick Vogt Over a year ago

@TomekSułkowski I want to update the value on blur but the problem is that I just cannot type anything in any textbox on my app! It's so depressingly :(

Collectives™ on Stack Overflow

AngularJS not able to type in textbox

2 Answers 2

1 Comment

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related