CODEWITHSUNDEEP
javascripthtmlcssangularjstextbox
Patrick Vogt
Patrick Vogt

Reputation: 916

AngularJS not able to type in textbox

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!

Upvotes: 1

Views: 2969

Answers (2)

AJ Richardson
AJ Richardson

Reputation: 6820

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'}.

Upvotes: 7

Tomek Sułkowski
Tomek Sułkowski

Reputation: 7201

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

Upvotes: 0

Related Questions